CSS Layout Issue In I.E. (figures)

XX7509 · 03-25-2005, 11:30 PM

Hello everyone!

Can someone please help me out, this is my first website using CSS. I think I'm doing really well everything is working for far except one issue with IE.

I have a header div which is at the very top of the page, the header has a background color and needs to span all the way across the width of the broswer, this works fine in FF and NS, but in IE I get a large 10px or so gap, where the white body shows through, this only happens on the right side, the left and top are completely flush with the side of the browser. I don't know why this only happens in IE, can someone please help?

I'm pretty sure all the HTML is correct, and theres only about 6 lines, so I'm only going to post the CSS code because I belieave that's where the problem is anyway.

If someone needs to see the HTML please let me know. I know that I can put all the similar styles on a single line, but I'm not worried about that right now, I just want to get the design right, then I can clean up the code once everything is working.
????: NamePros.com http://www.namepros.com/web-design-discussion/77864-css-layout-issue-i-e-figures.html

TIA!

Code:

#topwrapper
{
	font-family: Verdana;
	font-size: smaller;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	height: 25px;
	background-color: #DFE5EF;
	margin: 0;	
}

div.headright
{
	float: right;	
}

div.headleft
{
	float: left;

}

Just in case, here's the HTML anyway

Code:

	<div id="topwrapper">
	<div class="headleft">Version 0.1 BETA - For Testing Only</div>
	<div class="headright"><a href="../brokelink.htm">Home</a> | 
	<a href="../brokelink.htm">Logout</a></div>
	</div>

I don't have the program online, so there's no way to view it. Sorry.

Rowan W · 03-25-2005, 11:53 PM

I can't really see what the problem is, but just incase, use this code:

Code:

body {
     margin:0;
}

Also, don't use "smaller" with font sizes, use 'em' or 'px'.

And for padding, you can just use "padding: 5px 5px 5px 0px;", where each number corresponds to one side of the element.

XX7509 · 03-26-2005, 12:26 AM

Thanks for the reply.

I do have body margin set to 0, sorry I didn't paste then entire css file. I got the problem fixed, it was because 1. IE is crap, and 2. because I was trying to use frames like requested. I scrapted the frames and did it all over in pure css and now it works fine.

For some reason when IE displays frames even with COLS 25%, * it never completely fills the last frame, it always leaves a 10px margin on the last one.

Rowan W · 03-26-2005, 12:34 AM

Originally Posted by XX7509

1. IE is crap, and

Yes.

Glad you worked it out.

03-25-2005, 11:30 PM	THREAD STARTER #1 (permalink)
XX7509 New Member Join Date: Mar 2005 Location: United States Posts: 6	CSS Layout Issue In I.E. (figures) Hello everyone! Can someone please help me out, this is my first website using CSS. I think I'm doing really well everything is working for far except one issue with IE. I have a header div which is at the very top of the page, the header has a background color and needs to span all the way across the width of the broswer, this works fine in FF and NS, but in IE I get a large 10px or so gap, where the white body shows through, this only happens on the right side, the left and top are completely flush with the side of the browser. I don't know why this only happens in IE, can someone please help? I'm pretty sure all the HTML is correct, and theres only about 6 lines, so I'm only going to post the CSS code because I belieave that's where the problem is anyway. If someone needs to see the HTML please let me know. I know that I can put all the similar styles on a single line, but I'm not worried about that right now, I just want to get the design right, then I can clean up the code once everything is working. ????: NamePros.com http://www.namepros.com/web-design-discussion/77864-css-layout-issue-i-e-figures.html TIA! Code: #topwrapper { font-family: Verdana; font-size: smaller; padding-top: 5px; padding-left: 5px; padding-right: 5px; height: 25px; background-color: #DFE5EF; margin: 0; } div.headright { float: right; } div.headleft { float: left; } Just in case, here's the HTML anyway Code: <div id="topwrapper"> <div class="headleft">Version 0.1 BETA - For Testing Only</div> <div class="headright"><a href="../brokelink.htm">Home</a> \| <a href="../brokelink.htm">Logout</a></div> </div> I don't have the program online, so there's no way to view it. Sorry.

03-25-2005, 11:53 PM	#2 (permalink)
Rowan W NamePros Regular Join Date: Dec 2004 Location: QLD, Australia Posts: 713	I can't really see what the problem is, but just incase, use this code: Code: body { margin:0; } Also, don't use "smaller" with font sizes, use 'em' or 'px'. And for padding, you can just use "padding: 5px 5px 5px 0px;", where each number corresponds to one side of the element. __________________ Flash is bad for websites Why tables for layout is stupid IE IS BAD

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Layout Headache...	agoni_dsp	Web Design Discussion	1	03-22-2005 11:35 AM
looking to purchase a custom ALL css layouts	axilant	For Sale / Advertising Board	0	03-09-2005 06:15 PM
Mozilla/Firefox (css) width: 100%; issue.	FieroGT	Web Design Discussion	3	08-07-2004 01:06 AM
Css layout problem	biovelocity	Programming	5	01-06-2004 11:20 PM
CSS help please... positioning issue	ivcho	Programming	7	02-11-2003 04:23 PM

03-26-2005, 12:26 AM	THREAD STARTER #3 (permalink)
XX7509 New Member Join Date: Mar 2005 Location: United States Posts: 6	Thanks for the reply. I do have body margin set to 0, sorry I didn't paste then entire css file. I got the problem fixed, it was because 1. IE is crap, and 2. because I was trying to use frames like requested. I scrapted the frames and did it all over in pure css and now it works fine. For some reason when IE displays frames even with COLS 25%, * it never completely fills the last frame, it always leaves a 10px margin on the last one.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)