#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    California, USA
    Posts
    53
    Rep Power
    12

    CSS: Need help with simple layout


    Just need help with simple layout. When viewed in internet explorer it looks correct but when viewed in the Mozilla/Firefox browsers it looks incorrect. Basically the white background does not follow the text. http://www.bluebushel.com/temp/help.html

    Here the markup
    Code:
    <html>
    <head>
    	<title>help</title>
    	<link rel="stylesheet" type="text/css" href="includes/bluebushel.css">
    </head>
    
    <body>
    
    <div id="content">
     <br class="mainBreak" />
     <div id="leftNav"><div id="leftNavNav"><a href="" class="navLink">Stationary</a></div>
     <br class="leftNav" /><div id="leftNavNav"><a href="" class="navLink">Categories</a>
     <br class="clear2" /><a href="" class="navLink">Brand Names</a><br class="clear2" /><a href="" class="navLink">Top Sellers</a><br class="clear2" /><a href="" class="navLink">New Products</a></div>
     </div><div id="main">Es scheint, daß grammatische Göttlichkeit hübsch billig, zu sein ehrlich kommt. Kelly hat einen Schuß gehabt, und trotz Beantwortens wenigstens fünf Fragen anders zu mir, sie wurde auch für einen himmlischen Grammatiker befunden. Muß eigentlich ich noch von jemand nicht bombardierend die Prüfung hören—ist die geheime Absicht dieses des Autors, die organische Flexibilität von der Sprache zu offenbaren? Ich werde vermuten, daß das nicht ihre Absicht ist, weil so tiefschürfend wie der Punkt sein könnte, die Prüfung wird still kinda saugt. 
    
    Sowieso soll meine erste Verordnung, als neu Gottheit inthronisiert hat, befehlen dem Autor vom Quiz, Strunk zu lesen, und Weiß. Darin werden sie finden, daß die meisten Fragen mehrfache gültige Antworten, beide innerhalb und ohne die Wahlen Ein ist angeboten hat. Eigentlich für die meisten Fragen, wäre Ein weit besser dran Umformulieren des ganzen Satzes. Einige, von der sie wahrheitsgemäß häßlich sind. 
    
    Ein paar spezifischen Einwendungen:
    
    * Auf der Frage von besitzergreifend nachdem ein s, Amerikaner erscheinen hat geneigt, zur grundlegenden Regel von "Apostrophs" zu stecken. In anderem Stauwasser von der englischen Sprache mag Britannien und meine eigene kleine Insel, wir mehr sind geneigt, ab dem endgültigen s zu verlassen, dem etwas leistet, das Jesus, Jesus gehört'. Es ist kontextuell; sie sind beide Rechte. * Wir haben gut und wahrheitsgemäß gegangen über hinaus den Punkt sorgen von um Spalteinfinitive sich. Sie wissen, jenes Ganze "mutig zu gehen" oder "um mutig zu gehen" Ding. Gehen Sie nur schon! * Bezweifelt 7 liest: __ gegenübergestanden hat eine hellen Schatten von rot gedreht. Jetzt macht es, was formuliert Sie zu füllen in der Lücke dort wählen, es noch nicht aus wird nicht sein logisch. * Bezweifelt 16 auf Zeichensetzung, wie die meisten Dilemmas der Zeichensetzung, verläßt sich völlig, auf dem Handbuch Gestaltet, das Sie bevorzugen. * Bill Poster bedeckt am meisten von meinen anderen Einwendungen. 
    
    Als Sie sehen können, hat das Quiz meinen hackles ein Bit erhoben. Aber ich habe durch es erhalten, und am Ende, wurde ich mit meiner göttlichen Krone der Dornen, und dies kleine Ermahnung belohnt:
    
    Wenn Ihre Mission in Leben nicht schon ist, die englische Zunge zu bewahren, soll es sein. Glückwünsche und vielen Dank! 
    
    Ach Liebster. Dies ist sogar lustiger, wenn Sie den wallowsong gelesen haben. Ich denke, daß meine Mission in Leben gründlich in Anspruch in der englischen Zunge genommen ist. Aber es nicht bewahrend—ich habe bessere Dinge, als zu machen, schwimmen gegen Flutwellen. 
    
    Ich denke, daß meine Mission es auflockern soll.</div>
     
    </div>
    
    </body>
    </html>
    here is the link to the CSS file: http://www.bluebushel.com/temp/includes/bluebushel.css

    I need the white background to follow the text on the right like w hen it is viewed in Internet Explorer. Thanks for your time!
    Last edited by Axsuul; April 7th, 2004 at 02:55 PM.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Just need help with simple layout. When viewed in internet explorer it looks correct but when viewed in the Mozilla/Firefox browsers it looks incorrect.
    Actually, you have it just backwards. Mozilla correctly renders your code, while IE screws up as usual. It is simpler to code for a standards compliant browser such as any of the Mozilla/Gecko family of UAs, then apply the hacks IE needs. If you code for IE, it'll make you crazy trying to fix it for modern browsers. Look at my float demo for a bare bones example. Then go to /*PIE*/ for a thorough explanation.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    California, USA
    Posts
    53
    Rep Power
    12
    After consulting all the information you gave me, I still could not solve my problem probably because I'm getting confused with 2 float items.
    Last edited by Axsuul; April 7th, 2004 at 05:18 PM.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    OK, I've made another demo. There are two pairs of almost identical code. The first pair use two floats like you have. The first of the first pair does as yours does. There is nothing to cause the container div to expand vertically. It is seen as the black line at the top.

    The second of the first pair has a clearing element to expand the container.

    In the second pair, there is only one floating div. The content consists of a static paragraph. There is no clearing element in the first of the pair. There is one in the second.

    Study the code to see how the clearing element works. And, do go back to /*PIE*/ to study all the articles.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Location
    California, USA
    Posts
    53
    Rep Power
    12
    Thanks for all the help gary. I got it to work!
  10. #6
  11. No Profile Picture
    Registered Abuser
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Posts
    24
    Rep Power
    0
    What was the fix?

    You sample url at the top is broken in FireFox, btw.
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally Posted by kensav
    What was the fix?
    "Study the code to see how the clearing element works."
    You sample url at the top is broken in FireFox, btw.
    They all work in mine.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo