Few CSS Quirks

[FuZion]

Hi there,

I'm having a few funny CSS problems with this website: http://midwestfleet.com

First off, if you view it in IE (specifically IE8), you will see a rather large amount of padding above the middle page box.

Second, if you view it in FF or Google Chrome, you will see that the text is automatically indented very far the the right.

Is there a way to fix these?

The HTML/CSS is very easy to read, it's just a template at this point!

Thank you for your help,

FuZion

[Excavator]

Hello FuZion,
Try moving the closing div for #header .wrapper down so the menu's will be contained.
Like this -

	
	<div id="header">
    	<div class="wrapper">
        		<img id="logo" src="images/header.png">
        <ul id="smallnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact Us</a></li>
            <li class="last"><b><a href="#">Client Login</a></b></li>
        </ul>
        <div id="nav">
            <ul>
                <li class="current"><a href="#">Fleet Solutions</a></li>
                <li><a href="#">Our Company</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Request Service</a></li>
                <li><a href="#">Jobs</a></li>
            </ul>
        </div>
        <!--end .wrapper--></div>
    </div>
    <div id="main">
    	<div class="wrapper">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </div>
    </div>
    <div id="footer">
    	<div class="wrapper">
        	Copyright © Midwest Fleet Services 2008
        </div>
    </div>

CSS
I tried to highlight all the changes but I might have missed some...

@charset "utf-8";
* {
margin: 0;
padding: 0;
border: none;
}
body {
	background: #DFDFDF;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 14px;
}

#header {
	background: #FFF;
	border-bottom: 3px solid #5470B1;
}

	#header .wrapper {
		margin: 0px auto;
		padding: 12px 12px 0;
		width: 900px;
overflow: auto;
background: #f00; /*for testing only*/
	}
#logo {
width: 265px;
height: 55px;
float: left;
}
	
	/* #header #smallnav contains small links above tab bar */
	#header #smallnav {
width: 200px;
margin: 10px 0 20px;
float: right;
		list-style: none;
	}	
	#header #smallnav li {
		float: left;
		border-right: 1px solid #1A1A1A;
		padding: 0 5px 0 5px;
	}
	
	#header #smallnav a {
		text-decoration: none;
		font-size: 11px;
		color: #666;
	}
	
	#header #smallnav a:hover {
		text-decoration: underline;	
	}
	
	#header #smallnav .last {
		border-right: none;
	}
	
	/* #header #nav conatins main navigation tabs */
	#header #nav {
width: 550px;
float: right;
background: #00f;
	}	
	#header #nav ul {
		list-style: none;
	}
		
	#header #nav li {
		float: left;
		background: url("/images/nav_tab_left.png") no-repeat left top;
	}
	
	#header #nav a {
		display: block;	
		background: url("/images/nav_tab_right.png") no-repeat right top;
		padding: 10px 15px 4px;
		color: #FFF;
		font-weight: bold;
		text-decoration: none;
	}
	
	#header #nav .current {
		background: url("/images/nav_tab_left_over.png") no-repeat left top;
	}
	
	#header #nav .current a {
		background: url("/images/nav_tab_right_over.png") no-repeat right top;
	}
	
#main {
	margin: 15px auto;
	width: 900px;
	border: 1px solid #AAA;
}
#main .wrapper {
	padding: 15px;
background: #fff;
}
	
#footer {
	padding: 0;
	margin: 0;
	border-top: 3px solid #5470B1;
	background: #FFF;
	font-size: 11px;
}

	#footer .wrapper {
		margin: 0px auto;
		padding: 12px;
		width: 900px;
	}

[CaptainB]

Without being 100% sure, I think the errors are occouring by your use of position:relative.

Also, to reset the browser margin/padding, add this to your css:

* {margin:0px; padding:0px;}

Take care of your use of divs - too many 'unnessecary' divs can cause divits. For example, this div is not needed as you could apply the style to the image by giving it an ID and styling that element:

<div class="wrapper">
<img id="logo" src="images/header.png" />
</div>

And good job on the almost valid code

EDIT: Oops, one I'm too slow

[FuZion]

That is perfect, I still don't understand what the problem was, though. What should I look for in the future in order to prevent things like this from happening?

Was it the * {margin, padding} line? I'd love to learn what the thought process was behind the fix.

Thank you for your help guys! (And the markup is valid now! :])

[Excavator]

Originally Posted by FuZion

That is perfect, I still don't understand what the problem was, though. What should I look for in the future in order to prevent things like this from happening?

Was it the * {margin, padding} line? I'd love to learn what the thought process was behind the fix.

Thank you for your help guys! (And the markup is valid now! :])

CaptainB is right, too much use of positioning. That .wrapper div is used too many times in places that a div isn't needed yet. I say yet because I don't know if you need that div to hold something in your design thats coming later in develeopment.
For example, the .wrapper in your #footer is just an extra div and not needed. See divitis for an explanation.



* from DOS days

The asterisk is a wild-card
character which allows the user to enter only a limited part of a file
specification to find a file. It is useful when you wish to locate a
group of files with the same filename or the same extension.

We use it now in CSS as a "Universal Selector." The * just targets all selectors, a wildcard. By setting all margin/padding to 0 we zero out defaults that differ from browser to browser.