Hi folks,
I'm experiencing a strange problem with one element rendering incorrectly.
Basically I have a #content div with a wide left margin that the
navigation sits in:
#content {
margin: 0px 0px 0px 227px;
padding: 10px 10px 80px 10px;
background: url(../images/KGLogoContentBG.gif) no-repeat bottom right;
}
This seems to be working just dandy except for some images in a table
within a GMKitem class inside the #content area which just align
themselves to the left edge of the page.
..GMKitem {
position: relative;
border-bottom: 2px solid #659bb8;
padding: 10px 0px 10px 0px;
margin: 10px 0px 10px 0px;
}
#content .GMKitem img {
border: none;
padding: 0px;
margin: 0px;
vertical-align: middle;
}
If I resize the browser window the images all pop into the 'correct' place.
This behaviour also seems to occur in forms.
Example test page can be viewed at:
www.gallerykitchendesign.co.uk/csstest.html
Full css pages can be accessed at:
http://www.gallerykitchendesign.co.uk/styles/gkd_base.css
http://www.gallerykitchendesign.co.uk/styles/gkd_normal.css
http://www.gallerykitchendesign.co.uk/styles/gkd_metal.css
I seem to have been going around in ever decreasing circles for the
last few days and am rapidly approaching 'code blindness' so if anyone
would care to point out the obvious flaw(s) then I'd be most grateful.
Many thanks,
Mik
--
Quis custodiet ipsos custodes?
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
