Previous Message
Next Message

Weird padding, odd border, strange margins

Sent by Mehran Khalili on 20 September 2004 16:04


Hello,

I have three specific questions regarding CSS. Please refer to:

http://scandal.org/index3.php 

and the relevant CSS file at

http://scandal.org/scandal.css


1) WEIRD PADDING

I'm using the following css for the #content div:

#content {
		padding: 50px 25px 40px 25px ;
		margin-right: 212px;
		background-color: rgb(19, 40, 79);
		}

The padding is respected in IE5, but in Firefox the RIGHT padding
value isn't set, and instead the text gets squashed all the way to the
edge of the div. This also affects the horizontal rules as well. I
imagine this has to do with the margin value, but I need this for the
positioning of the div. Why is this, and what do you suggest as a
workaround?

2) ODD BORDER

To keep a continuous light blue border around the main section of the
page (the minicontainer div), I'm using the following CSS:

#minicontainer {
		
		background-color: rgb(19, 40, 79); 
		width:100%;
		border: 2px solid #B6C7CF;
		text-align:left;
		}

So that the border also flows around the logo at the top left of the
page (overlapping the #minicontainer border), I'm using the following
CSS:

..logo{

		border-left: 2px solid #B6C7CF;
		border-right: 2px solid #B6C7CF;
		border-top: 2px solid #B6C7CF;
		/* Next 3 lines are for overlap of minicontainer border (not very
elegant but it seems to work) */
		border-bottom: 1px solid #13284F;			
		position:relative;
		top:2px;
		}

This works fine in Firefox, but not in IE5 (the minicontainer border
is not overlapped, which ruins the lines). Why is this, and what do
you suggest as a workaround?

(Interestingly, although my XHTML does validate as 'Strict', changing
the DOCTYPE from 'Transitional' to 'Strict' causes this trick to fail
in Firefox. Why this is the case?)

3) STRANGE MARGINS

See the inline image in the sidebar under 'What's this?' For this I am
using the following CSS:

..inlineside{
		margin: 20px 4px 4px 4px;
		float: left;
      	}

This looks okay in Firefox, but the image is out of place in IE5, with
a large margin at the bottom. Why is this, and what do you suggest as
a workaround?

Naturally if anyone has any other suggestions of how I can improve the
CSS, I'd appreciate your thoughts on it (please mail them directly to
me if it's more appropriate).

Thanks and regards,


Mehran
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: