SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Width and Footer issue with IE and FireFox

    Hi (Dan and others)

    My code is below but here are the points to consider -

    a) YOu can see the Mozialll fix "div>p {margin:0}" without this the content of the footer appears below one line and so does the date on the top right hand corner. But in IE this is fine.

    b) The three containers seems to be equal length in FF and IE. But the various boxes inside the coloumns (middle and right, the first coloumn as only box) seems to differ in width between FF and IE even though I have fixed it. In FF they appear to be longer. I guess this is some browser issue. Any elaboration would help.

    c) I have an IE problem here. The boxes inside the container (boxmiddle and boxright) are all left aligned (floated left) but differed in their width slightly even though I have fixed the width. I dont understand why! But under FF they are all perfectly aligned as they should be, even in my dremaweaver the boxes are aligned perfectly. This seems like IE issue. I am sure this is some IE bug that can be fixed.


    MY CSS is:

    a:link {
    color:#0066CC;
    text-decoration:none;
    }
    a:visited {
    color:#0066CC;
    text-decoration:none;
    }
    a:hover {
    color:#0066CC;
    text-decoration:none;
    }
    a:active {
    color:#0066CC;
    text-decoration:none;
    }

    #masthead{
    width: 900;
    background-image:url(../images/header.png);
    background-repeat: no-repeat;
    width:900;
    height:142;
    background-attachment: scroll;
    position: relative;
    }

    #datebox{
    position:absolute;
    left:785px;
    top:112px;
    width:109px;
    height:18px;
    overflow:visible;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.2em;
    text-align:right;
    }



    td {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    }

    th {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    }

    .small {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 9px;
    }

    .medium {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    }

    .big {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.4em;
    margin: 2px;
    }

    .archive {
    font-family: inherit;
    font-size: 1.4em;
    font-weight:bold;
    font-styleblique;
    text-align:center;
    }




    .bigcolor {
    font-size: 1.2em;
    font-weight:bold;
    }

    .xbig {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 24px;
    }


    .box1 p {
    line-height:1.2em;
    }

    html, body{height:100%;}
    html,body {margin:0;padding:0}
    div>p {margin:0} /* fix for mozilla */

    body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 0.625em; /* This gives a value of 10px */
    background-color: #FFFFFF;
    margin-left:auto; /* makes the content center, works for all but IE needs a fix thus below*/
    margin-right:auto; /* makes the content center */
    font: #000000;
    height: 100%;
    width: 900px;
    text-align:center; /* fix for IE, removes the need for center tag which is more presentation */
    }

    #outer{
    flow:left;
    min-height:100%;
    height:auto;
    width:inherit;
    margin-left:0;/* center it*/
    margin-right:0;/* center it*/
    position:relative;
    text-align:left;
    }


    * html #outer{
    height:100%;
    width:902px;/* box model hack for ie5.+*/
    w\idth:900px
    }

    #container1 {
    float: left;
    width: 430px;
    height: auto;
    margin-top:3px;
    }
    #container2 {
    left:430px;
    float: left;
    width: 270px;
    height:auto;
    margin-top:3px;
    margin-left:3px;
    border:thin #000000 solid;
    }
    #container3 {
    left:703px;
    float:left;
    width: 190px;
    height: auto;
    margin-top:3px;
    margin-left:3px;
    margin-right:0px;
    border:thin #000000 solid;
    }

    .boxarticle {
    width: 70%;
    top: 144px;
    font-size: 1.4em;
    text-align: left;
    line-height:150%;
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 0em;
    height: auto;
    float: left;
    margin-left: 10px;
    }

    .boxpoem {
    width: 100%;
    top: 144px;
    font-size: 1.4em;
    text-align: left;
    line-height:150%;
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 0em;
    height: 500px;
    float: left;
    margin-left: 10px;
    }


    .boxanalysis {
    font-family: Georgia, "Times New Roman", Times, serif;
    border-width:thin;
    padding:0.5em 1em 0.5em 1em;
    border-style: solid;
    border-color: #000000;
    font-size: 1.2em;
    text-align: justify;
    font-stretch:expanded;
    background-color: #CAFBD2;
    visibility: visible;
    height:auto;
    }

    .boxmiddle {
    font-family:inherit;
    text-align: justify;
    line-height:125%;
    padding:0.5em;
    border-width: thin;
    border-style: solid;
    border-color: #CCCCCC #666666 #666666 #CCCCCC;
    font-size: 1.2em;
    background-color: #CDFCFC;
    visibility: visible;
    margin-bottom:2px;
    width:265px;
    }


    .boxright {
    font-family:inherit;
    text-align: justify;
    line-height:125%;
    padding:0.5em;
    border-width: thin;
    border-style: solid;
    border-color: #CCCCCC #666666 #666666 #CCCCCC;
    height: auto;
    font-size: 1.2em;
    background-color: #CAFBD2;
    visibility: visible;
    margin-bottom: 2px;
    width:185px;
    }

    .boxbook {
    font-family:inherit;
    text-align: justify;
    padding:0.5em;
    border-width: thin;
    border-style: solid;
    border-color: #CCCCCC #666666 #666666 #CCCCCC;
    height: auto;
    background-color:#CAFBD2;
    font-size: 1.2em;
    visibility: visible;
    margin-bottom: 2px;
    width:185px;
    }

    .bookcover {
    text-align:center;
    font-size:18px;
    font-weight:bold;
    background:no-repeat #CAFBD2 url(../images/suicide6.jpg) center;
    color:#FF0000;
    }

    #footer {
    font-family:inherit;
    font-size: 1em;
    color: #000000;
    height:15px;
    background-color:#8FDCA8;
    font-weight: bolder;
    left: 0px;
    width:900px;
    position:absolute;
    }


    #clearfooter{clear:both;height:15px;width:100;}

    .fiction {
    font-style:italic;
    }


    .title {
    font-size:1.2em;
    color:#0066CC;
    font-weight: bold;
    }

    .articletitle {
    font-size:1.6em;
    color: #0000CC;
    line-height:125%;
    font-weight: bold;
    }

    .image_float {
    float:right;
    margin:0 0 0 0.5em;
    }

    h1,h2,h3 {
    font-family:Georgia, "Times New Roman", Times, serif;
    letter-spacing: 1px;
    }

    .author {
    font-size:1.2em;
    }
    .spacer {
    clear:right;
    }


    .boldtext { font-weight:bold;
    font-styleblique;
    line-height:130%;
    font-stretch:expanded;
    }

    MY HTML code is (note I have taken out the PHP as much I can): -

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <!DOCTYPE HTML PUBLIC "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--Serif WebPlus 10 HTML Export-->
    <!--Supports HTML 4.01-->
    <meta name="Generator" content="Serif WebPlus 10.1.1.036">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="imagetoolbar" content="no">


    <title>Views-Home</title>
    <link href="CSS/main.css" rel="stylesheet" media="screen" type="text/css">

    </head>

    <body>

    <div id="masthead">
    <div id="datebox">
    <p> <?php echo date("d F, Y") ?></p>
    </div>
    </div> <!-- end of the header section -->

    <div id="outer">
    <div id="container1">
    <div class="boxanalysis">
    <div align="center" class="big">Latest Analysis </div>
    <--! taken out my php codes here -->
    <hr><br>

    </div> <!--end of boxanalysis -->
    </div>
    <!-- end of first container -->

    <div id="container2">
    <div class="boxmiddle">
    <div align="center" class="big"> In Quotes </div>
    <hr>
    <div align="center" class="boldtext"> </div>
    </div>

    <div class="boxmiddle">
    <div align="center" class="big">21st Century Myths </div>
    <hr>
    <div class="bigcolor" align="center"> But the Reality </div>
    <br>

    </div>

    <div class="boxmiddle">
    <div align="center" class="big">History </div>
    <hr>
    <div class="title" align="center">
    </div><br>

    </div>


    <div class="boxmiddle">
    <div align="center" class="big">Juurney </div>
    <hr>
    <div class="title" align="center" >
    </div>
    </div>
    </div> <!-- end of second container -->

    <div id="container3">
    <div class="boxbook">
    <div class="big" align="center"> Forthcomming Book </div> <hr>
    <div class="bookcover" align="center"> Travel
    <font color="#000000" size="-1"> By Explorer </font> </div>
    </div>

    <div class="boxright">
    <div align="center" class="big"> Poetry Corner </div>
    <hr>

    </div>


    <div class="boxright">
    <div align="center" class="big"> Letters </div>
    <hr>
    </div>

    <div class="boxright">
    <div align="center" class="big">Support</div>
    <hr>
    </div>
    </div>
    <!-- end of third container -->

    <br>
    <div id="clearfooter"> </div>


    <div id="footer">
    <p align="center"><a href="contactus.html"> Contact Us |</a><a href="aboutus.html">
    About Us | </a><a href="site.html">Site Map</a></p>
    </div>

    </div> <!-- end of the outershell -->


    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I advised you on this a week ago, with a complete solution, valid code and advice.

    http://www.sitepoint.com/forums/show...4&postcount=13

    I'm sure Dan or anyone else will give you exactly the same advice so I'm not sure why you're directing a different question with exactly the same problems at someone else?

    I also advised you here http://www.sitepoint.com/forums/show...3&postcount=24 today, that your doctype is invalid and how to correct it but you seem to be ignoring all these points I've raised which will help you.

    Put in the correct doctype, don't use hacks for Firefox as it's more standards compliant than IE. Make it work in Firefox and then apply any hacks you might need for IE.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI CCSWIZ

    For the doctype I gave you a response on the other thread. I said I entered the code you gave in it in two separate lines as opposed to the one single line, which makes my headers vanish for some reason.

    I have applied the doctype and it said something abuot UTF not being in the right format. I wil examine this later. Your point about makign it work in FF and then applying the hack for IE is interesting.

    As for the other issue, I did take on board your container and if you see I have applied what you suggested. I have also taken into accoutn about the width issue. But the point I am made above about IE explorer and FF is a new one and did not post on this point as I only saw this yesterday. IN fact I only started to refer to FF in the last few days I think.

    The reason why I posted it because DAN requested for my code.


    regards

    Explorer

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I probably didn't explain clear enough the importance of a correct and valid doctype.

    IE6 and IE7 have two methods of rendering. Standards compliant and quirks mode. Whilst standards mode in both browsers isn't perfect, using a doctype renders the two browsers fairly close to other standards compliance browsers like Firefox, Opera and Safari.

    If you choose not to use a doctype then IE6 and 7 will switch into something known as quirks mode which will render the two browsers much more like IE5.x and will use the broken box model amongst other quirks which don't follow the HTML specification and is therefore unreliable.

    Obviously if you go down this route then you'll more than likely be creating invalid code which Internet Explorer will interpret wrongly but present how you're expecting it to.

    Now, when you go and look at the code in Firefox, Opera and Safari. They'll render in standards mode despite you using an incorrect doctype and because you've used the wrong code to create your page, it'll look wrong to you in these browsers and despite them doing exactly what you've told them to do, you'll blame these browsers and not the fact that you've written bad code that isn't valid.

    If however, you take the time to put in a valid doctype and write valid code that gives you the nice shiny green tick at http://validator.org and test it in a browser that uses the latest web standards then you're more likely to get a cross browser experience that your expecting.

    The reason I'm suspecting you've got a problem with the character set not validating is because you've got two lots in there

    Code:
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--Serif WebPlus 10 HTML Export-->
    <!--Supports HTML 4.01-->
    <meta name="Generator" content="Serif WebPlus 10.1.1.036">
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    Use one or the other.

    I'd honestly suggest using my code as the basis for your design. You've got absolute and relative positioning in your code which isn't need and your including a box model hack in a place you don't need it.

    Code:
    #outer{
    	flow:left;
    	min-height:100&#37;;
    	height:auto;
    	width:inherit;
    	margin-left:0;/* center it*/
    	margin-right:0;/* center it*/
    	position:relative;
    	text-align:left;
    }
    * html #outer{
    height:100%;
    width:902px;/* box model hack for ie5.+*/
    w\idth:900px
    } 
    There's other issues with your CSS and HTML which will be resolved if you use the code I initially gave you as a template to start from


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
  •