Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Few CSS Quirks

  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Few CSS Quirks

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello FuZion,
    Try moving the closing div for #header .wrapper down so the menu's will be contained.
    Like this -
    Code:
    	
    	<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...
    Code:
    @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;
    	}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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:

    Code:
    * {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

  • #4
    Regular Coder
    Join Date
    May 2006
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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! :])

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by FuZion View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    FuZion (04-12-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •