SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google Chrome Merged Objects.

    When you load the following code in I.E it comes with the desired effect. But when it comes to Chrome it all overlaps.
    My main browser is chrome and I never normally get any problems.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
    <link rel="stylesheet" type= "text/css" href="mystyle.css">
    <title>What the Digerati Know</title>
    </head>
    <body>
    <ul id=”button”>
    <li><a href="index.html">Advatnages of Goats</a></li>
    <li><a href="bof.html">Benefits Of Goats</a></li>
    <li><a href="cmos.html">Common Methods of Goat Herding 1</a></li>
    <li><a href="cmos.html">Common Methods of Goat Herding 2</a></li>
    </ul>
    <p>
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    VTEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTX
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    </p>
    </body>
    </html>
    CSS Code

    Code:
    body 
    {
    background-color:#B0B0B0;
    text-align: center; /* For IE */ 
    
    }
    
    #button {
    padding: 0;
    margin: 0 auto; 
    width: 900px; 
    }
    #button li {
    display: inline;
    
    }
    #button li a {
    font-family: Arial;
    font-size:16px;
    text-decoration: none;
    float:left;
    padding: 15px;
    background-color: #2175bc;
    color: #fff;
    }
    #button li a:hover {
    background-color: #2586d7;
    margin-top:2px;
    padding-bottom:13px;
    }
    
    p 
    {
    border-style: solid;
    width: 800px;
    margin: 0 auto;
    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
    margin-left:auto;
    margin-right:auto;
    }
    Anyone who can help it would be grateful.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Its broken in all but IE7 as far as I can see

    You need to clear the element that follows the floated navigation or its background just slides underneath.

    It's not possible either to make multiple floated elements just happen to fit the total width of the parent using padding alone. Browsers render text at different sizes and a whole line of text can be as much as 20px longer/shorted depending on browser.

    You either need to remove the padding and size each element to fit exactly with dimensions which will allow then to be zoomed a few times without breaking or make the last item non floated so it just fills the remaining space automatically without the need for padding. This latter method will still allow for a couple of text resizes but will break sooner than the first method.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type= "text/css" href="mystyle.css">
    <title>What the Digerati Know</title>
    <style type="text/css">
    body {
    	background-color:#B0B0B0;
    	text-align: center; /* For IE */
    	font-size:100%;
    }
    #outer {
    	width:904px;
    	margin:auto;
    }
    #nav {
    	padding: 0;
    	margin: 0 auto;
    	width: 904px;
    	list-style:none;
    	font-family:Arial, Helvetica, sans-serif,;
    }
    #nav li { display: inline; }
    #nav li a {
    	text-decoration: none;
    	float:left;
    	padding:0 15px;
    	line-height:3em;
    	height:3em;
    	background: #2175bc;
    	color: #fff;
    }
    #nav li a:hover {
    	background-color: #2586d7;
    	height:2.8em;
    	top:.2em;
    	position:relative;
    }
    #nav li.last a {
    	float:none;
    	overflow:hidden;
    	zoom:1.0;
    	text-align:center;
    	display:block;
    }
    #main {
    	border:2px solid #000;
    	width: 800px;
    	margin: 0 auto;
    	padding:25px 50px;
    	clear:both;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    		<ul id="nav">
    				<li><a href="index.html">Advantages of Goats</a></li>
    				<li><a href="bof.html">Benefits Of Goats</a></li>
    				<li><a href="cmos.html">Common Methods of Goat Herding 1</a></li>
    				<li class="last"><a href="cmos.html">Common Methods of Goat Herding 2</a></li>
    		</ul>
    		<div id="main">
    				<p> TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    						VTEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTX
    						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
    						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT </p>
    		</div>
    </div>
    </body>
    </html>
    To avoid the text wrapping as text size is increased you would need to use ems for the container so that the container expands with text size. Or alternatively use less links on the top so that they have more room to grow.

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for explaining. Normally IE is the problem :|.


Bookmarks

Posting Permissions

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