div layout question

[kallywag]

hello. i just learned about css a week ago and im having a silly problem. im working on a website with nested divs here:

http://www.stromengineering.com/newsite/

the stylesheet:

http://www.stromengineering.com/newsite/stylesheet.css

I've temporary changed the divs' background colors so you can see how it's laid out. The red container div holds a series of stacked divs that make up my page, and the red container div is inside a pink main container div. the only problem is the extra space (black) in the #navbar div and the extra space between #navbar and the #middle divs which appears in red. despite tinkering with padding, margins and all that, i cant seem to figure out how to delete this space.

note: only the red space between the two divs shows up in netscape, but in ie there is the red space and extra space in the #navbar div (shown in black). what should i change?

thanks.

 

[Vragabond]

Ok. Got your problems fixed, though the first one was a weird one:
Problem 1: Red space
I cannot explain why the red space was showing but applying border to the middle div eliminated the red space in mozilla and ie. After several attempts in understanding the strange behaviour I have changed the top padding of the middle div which succesfully solved the problem:

#middle {
	padding: [b][COLOR=blue]1px[/color][/b] 70px 30px 70px;
	background-color: white;
	background-image: url('[URL unfurl="true"]http://www.stromengineering.com/newsite/images/mainbg.gif');[/URL]
	background-repeat: repeat-y;
	position: relative;
	}

Problem 2: Black IE space.
This one is much simpler, problem I have seen before. It is a problem with whitespace characters and inline elements. Images are inline elements and whitespace characters are sometimes incorrectly represented by browsers. In your case it is IE, which is rendering the space between your last image and <div> closing tag as an extra printed space (which however resides in a new line, since the first is filled with pictures). If you remove that space, the black goes away.

...<img name="Rollover" src="[URL unfurl="true"]http://www.stromengineering.com/newsite/images/about-us.gif"[/URL] border="0"></a><img src="[URL unfurl="true"]http://www.stromengineering.com/newsite/images/contact.gif"[/URL] alt="Contact" />[b][COLOR=blue]</div>[/color][/b]

 

[kallywag]

yeah i had discovered that thing with the border, but i didnt want a border there and i didnt want to change the padding. the problem, which someone from another forum discovered, was the margins for my <h1> tags. they have a default width, and if you set them to 0 you can play around with padding and lose the space. thanks.