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 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FF/Opera problem with floats(?) and overlap

    CSS:
    Code:
    .page_border {
    	margin: 0px auto;
    	width: 750px;
    	border: 1px solid #000;
    	background-color: #fff;
    }
    
    .main_left_col_330, .main_right_col_330 {
    	width: 330px;
    	padding: 0px 10px 10px 10px;
    	display: inline;
    	border: 1px solid #ccc;
    	background-color: #eee;
    }
    
    .main_left_col_330 {
    	float: left;
    	margin: 15px 15px 15px 15px;
    }
    
    .main_right_col_330 {
    	float: right;
    	margin: 15px 15px 15px 0px;
    }
    
    .main_banner {
    	font: 10pt/20px Arial, Verdana, Tahoma, Times, Sans-Serif;
    	padding: 0px;
    	margin: 10px 0px 10px 0px;
    	border: 1px solid #000;
    	background-color: #fff;
    	text-align: center;
    }
    
    .end_container {
    	width: 698px;
    	padding: 10px;
    	margin: 0px 15px 15px 15px;
    	border: 1px solid #000;
    }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><link type="text/css" rel="stylesheet" href="css/style.css"></head>
    <body>
    
    <div class="page_border">
    <div class="main_left_col_330">
    <div class="main_banner"><a href="latin.htm">Latin1</a></div>Latin text.</div>
    <div class="main_right_col_330">
    <div class="main_banner"><a href="latin.htm">Latin</a></div>Latin text.</div>
    <div class="end_container">Latin text go here</div>
    
    </div>
    </body>
    </html>
    IE displays this fine; left and right columns, then end_container below, all wrapped inside page_border.

    FF/Opera is another case, though. I'm of the impression that the floats are causing the problem, but I can't see any other way of dedicating the elements to the left/right sides, respectively. These browsers put end_container "above/behind" the left/right columns, whereas it should be displayed at the end (below left/right columns).

    Any help appreciated.

    Thanks,
    Kim.
    Last edited by kimlb; 02-27-2005 at 08:54 AM.

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    get rid of:
    display: inline;

    You float block elements, not inlines.

    IE is probably rendering in quirksmode which often happens with xhtml doctypes, because of:
    the namespace declaration on the html, which IE does not understand.
    Last edited by COBOLdinosaur; 02-27-2005 at 11:08 AM.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No change.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You need to clear the floats.

    http://css.maxdesign.com.au/floatutorial/

    Code:
    .end_container {
            clear: both;
    	width: 698px;
    	padding: 10px;
    	margin: 0px 15px 15px 15px;
    	border: 1px solid #000;
    }
    IE displays this fine; left and right columns, then end_container below, all wrapped inside page_border.
    IE displays this wrong as it incorrectly expands the height of the outer container to match the float, when floats are in fact out of the page flow until cleared. COBOLdinosaur is probably right when he says you're actually rendering in Quirksmode rather than Strict.
    Last edited by rmedek; 02-27-2005 at 11:52 PM.

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I'm still finding my way around floats. On the note of rendering mode, I thought I ensured strict mode by using

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    ?

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by kimlb
    Thanks, I'm still finding my way around floats. On the note of rendering mode, I thought I ensured strict mode by using

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    ?
    As COBOLdinosaur says, it's most likely the namespace on the <html> tag. IE has kittens when it sees that.

  • #7
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    If you want compliance to strict then use:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Using an immature XHTML doctype that is never going to be widely support does not buy you anything. IE support of XML is nothing but vapor speak, and lip service. Mozilla has only implement as small subset, and seems reluctant to proceed any further until there is a workable standard that will be widely implemented.

    Mean while the stable proven htmo4.01 strict, produces teh fewest cross-browser issues of any other doc type.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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