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
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    All good in Firefox, but a mess in IE

    Hi folks.

    Please try not to laugh at my web design noobness, I'm a photoshop monkey, but I thought I'd have a go at updating this website to learn css & html, it's far more complex than I'd anticipated.

    I've managed to cobble this much together, the css even validates:

    http://www.accesscomms.com.au/Newsite2/

    It displays nicely in Firefox but gives IE7 (and presumably IE6) serious indigestion, it seems hellbent on positioning the first round cornered content box on the line below the vertical menu, rather than right next to it.

    I think the problem must be in one of these code excerpts somewhere, (I've cut out all the bits I thought wouldn't affect this issue) but I've no idea where


    The CSS

    body {
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #53565D;
    font-size: 11pt;
    }

    #content {
    width: 734px;
    margin: 35px 0 auto;
    }


    /*Vertical Menu */


    #VertMenu p {
    margin:0 0px;
    }

    #VertMenu {
    background: transparent;
    float: left;
    width: 150px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0 auto;
    }

    /*Rounded Corner boxes*/

    .roundcont {
    margin: 0px 155px;
    width: 579px;
    background-color: #f0f0f0;
    color: #53565d;
    }


    .roundcont p {
    margin: 0 10px;
    text-align: justify;
    padding: 10px 0px 10px 10px;
    font-size: 11pt;
    }


    .roundtop {
    background: url(Borders/tr2.gif) no-repeat top right;
    }


    .roundbottom {
    background: url(Borders/br1.gif) no-repeat top right;
    }

    img.corner {
    width: 15px;
    height: 15px;
    border: none;
    display: block !important;
    }



    I really am the n00biest of all n00bs, if I need to add more info for anyone to help, please let me know & I will.

    Any help or advice on bashing this into shape in IE would be very very much appreciated.

  • #2
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ZOMG

    I figured it out!!!!!!

    In CSS I added absolute position to the vert menu css:

    #VertMenu {
    position:absolute;
    margin: 0 0px;
    background: transparent;
    float: left;
    width: 150px;
    padding: 0px 0px 0px 0px;
    }


    Then added the <div id="content">

    to above the <div class="roundcont"> as well as above the<div id="VertMenu">

    I'm too n00b clueless to know why it works, but it does.


  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Lollygag View Post
    In CSS I added absolute position to the vert menu css [...]
    Then added the <div id="content"> to above the <div class="roundcont"> as well as above the<div id="VertMenu">
    It doesn't look like a too good solution.

    Per CSS 2.1 Working Draft, Section 9.2 it makes no sense to simultaneously absolutely position an element and float it. More precisely, when you do this the computed value of the float property becomes none.

    Also you now have two elements with id="content". You can't have that either.

    Please reconstruct the broken page so that we can take a look at it.

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the interest Koyama.
    I really had no idea how complex CSS is when I started, I've put this together via a combination of a lot of tutorials and a lot of trial & error. Probably not the best approach.

    The broken code is here:
    http://www.accesscomms.com.au/Newsite2/Rounded3.html

    I've pared it down to the essentials, so hopefully code irrelevant to the issue won't obscure the problem.
    The style sheet is embedded in the source of this one in case that might make it easier to diagnose the problem.

    Basically the page consists of:
    - a header,
    - 2 horizontal navigation menus,
    - a vertical navigation menu
    - 2 types of round corner boxes to hold the main text.

    The code following in this post is that for the header & 2 horizontal navigation menus.
    All the code in this post seems to me to be working fine (but I've posted it here in case there's a problem I've missed).
    In my next post (post #5) is the problematic code.

    The CSS for the header, the first horizontal Navigation bar ("Horizontal Tab Menu"), and the second horizontal Navigation bar ("Horizontal Home Navigation Bar"):

    Code:
    /* Header */
    
    #header {
    	width: 734px;
    	height: 53px;
    	margin: 0 0 auto;
    	background: url('Navigation/header.gif') no-repeat;
    	}
    
    /*Horizontal Tab Menu*/
    
    #TabMenu {
    	margin: 30px 0 auto;
    	list-style-type: none;
    	float: left;
    	clear:both;
        }
    	
    #TabMenu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	}
    
    #TabMenu li{
    	float: left;
    	background: url('Navigation/tabgrey2.gif') no-repeat top left; 
    	padding-left: 10px;
    	}
    
    #TabMenu a {
    	color: #53565d;	
    	font-size: 12pt;
    	font-weight: bold;
    	background: url('Navigation/tabgrey2.gif') no-repeat top right; 
    	display: block;
    	padding-left:4px; padding-right:10px; padding-top:4px; padding-bottom:1px;
    	text-decoration: none;
    	}
    	
    #TabMenu li:hover a,
    #TabMenu li.cur {
    	display: block;
    	color: #dbdcde;
    	text-decoration: none;
    	background: url('Navigation/tabdarkgrey.gif') no-repeat top right; 
    	padding-left:4px; padding-right:10px; padding-top:4px; padding-bottom:1px
    	}
    
    #TabMenu li.cur,
    #TabMenu li.over,
    #TabMenu li:hover
    {
      background: url('Navigation/tabdarkgrey.gif') no-repeat left;
      display:block;
    }
    
    /* Home Navigation Bar*/
    
    #HomeNavBar {
    	margin: 0 0 auto;
    	list-style-type: none;
    	float: left;
    	width: 734px;
    	background: url('Navigation/bargray.gif') repeat-x; 
    	}
    
    #HomeNavBar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	}
    
    #HomeNavBar li {
    	float: left;
    	}
    
    #HomeNavBar a {
    	display: block;
    	float: left;
    	height: 25px;
    	padding: 5px 20px 5px 20px;
    	text-decoration: none;
    	color: #53565d;
    	font-size: 12pt;
    	font-weight: bold;
    	}
    
    #HomeNavBar a:hover, #HomeNavBar .active a {
    	background: url('Navigation/bardarkgray.gif') no-repeat;
    	border: 0px;
    	color: #dbdcde;
    	}
    The header & the 2 Horizontal Navigation bars all seem fine, I've added it to this post in case it might make the problem & solution more immediately apparent. As you can see, the 2 horizontal navigation bars are nested within the header div:

    Code:
    <div id="header">
    
    <!--Horizontal Tab Menu (Products, Ref etc.)-->
    
    <div id="TabMenu">
    <ul>
    	<li><a href="../catalogcurrent.htm">Products</a></li>
    	<li><a href="../reference.htm">Reference</a></li>
    	<li><a href="../corporate.htm">Corporate</a></li>
    	<li><a href="../contact.htm">Contact Us</a></li> 
    </ul>
    </div>
    
    <!--Horizontal Navbar (Home, Chinese etc)-->
    <div id="HomeNavBar">
    <ul>
    	<li class="active"><a href=../default.htm><img border="0" src="Navigation/HomePale.gif" width="12" height="12"> Home</a></li>
    	<li><a href="../Sitemap.htm"><img border="0" src="Navigation/sitemap.gif" width="12" height="11"> Site Map</a></li>
    </ul>
    </div>
    </div>
    Last edited by Lollygag; 05-09-2007 at 03:01 AM. Reason: accidently posted too early

  • #5
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now here is where the problem lies - the CSS for the vertical navigation menu and the content div that is supposed to position it correctly:

    Code:
    #content {
    	width: 734px;
    	margin: 35px 0 auto;
    	}
    
    /*Vert Menu */
    
    .VertMenuButton {
    	text-align: left;
    	margin: 0px;
    	padding: 0px;
    	}
    
    .VertMenuButton a:link {
    	font-size: 10pt;
    	font-weight: bold;
    	color: #53565D;
    	background-color: #dbdcde; 
    	padding: 3.5px;
    	display: block;
    	border-bottom: 2px #ffffff solid;
    	text-decoration: none;
    	}
     
    .VertMenuButton a:hover {
    	background-color: #999;
    	color: #dbdcde;
    	text-decoration: none;
    	}
    
    #VertMenu p {
    	margin:0 0px; 
    	}
    	
    #VertMenu {
    	background: transparent; 
    	float: left;
    	width: 150px;
    	padding: 0px 0px 0px 0px;
    	position: absolute;
            margin: 0px 0 auto;	
    }
    The round cornered boxes roundcont & roundcont2 hold the main text and an image that is floated right. Roundcont2 appears 2nd, and seems fine, it's 734px wide (same width as header). "roundcont" is the problem. It is 579px wide to leave room for the vert menu to sit to the left of it. In Firefox the positioning works as intended, my problem is that in IE, the vert menu sits on top of the round corner box "rountcont":

    Code:
    /*Rounded Corner boxes*/
    
    .roundcont {
    	margin: 0px 155px;
    	width: 579px;
    	background-color: #f0f0f0;
    	color: #53565d;
    }
    
    .roundcont2 {
    	margin: 7px 0px;
    	width: 734px;
    	background-color: #f0f0f0;
    	color: #53565d;
    }
    
    .roundcont p {
    	margin: 0 10px;
    	text-align: justify;
    	padding: 10px 0px 10px 10px;
    	font-size: 11pt;	
    }
    
    .roundcont2 p {
    	margin: 0 10px;
    	text-align: justify;
    	padding: 10px 0px 10px 10px;
    	font-size: 11pt;	
    }
    
    .roundtop { 
    	background: url(Borders/tr2.gif) no-repeat top right; 
    }
    
    .roundtop2 { 
    	background: url(Borders/tr3.gif) no-repeat top right; 
    }
    
    .roundbottom {
    	background: url(Borders/br1.gif) no-repeat top right; 
    }
    
    /*The round corners for the borders are these gifs*/
    
    img.corner {
       width: 15px;
       height: 15px;
       border: none;
       display: block !important;
    }
    Product images are floated within the round corner borders

    Code:
    /*Floating Image*/
    
        img.floatRight { 
        float: right; 
        margin-left: 15px;
        margin-right: 3px;
        margin-top: -5px;
        position: relative; top: 0px; right 0px; 
        }
    The html for these:

    Code:
    <div id="content">
    
    <!--Vert Menu -->  
    
    <div id="VertMenu">
    <p>
     	<p class="VertMenuButton"><a href="corporate.htm">Corporate Information</a></p>
     	<p class="VertMenuButton"><a href="currentcatalog.htm">Products</a></p>
     	<p class="VertMenuButton"><a href="reference.htm">Reference Documents</a></p>
     	<p class="VertMenuButton"><a href="chinese.htm"><img border="0" src="Navigation/Chinesegrey.gif" width="52" height="14"/></a></p>
     	<p class="VertMenuButton"><a href="telephone.htm">Telephone Numbers</a></p>
     	<p class="VertMenuButton"><a href="mailto:websales@accesscomms.com.au">Email Sales</a></p>
     	<p class="VertMenuButton"><a href="mailto:websmaster@accesscomms.com.au">Email Webmaster</a></p>
    </p></div>
    
    <!--Access Comms text -->
    <div class="roundcont">
       <div class="roundtop">
    	 <img src="Borders/bl2.gif" alt="" 
    	 width="15" height="15" class="corner" 
    	 style="display: none">
       </div>
    <img src="images/Home-page-pic2.gif" class="floatRight">
       <p><b>Access Communications PTY LTD</b><br>
    Importers, manufacturers and wholesalers of plugs, sockets, cables, adaptors and tools for Power, Telecommunications, Computer and Data products and installations. Our competitive pricing maintains your profit margin and market share.</p>
      
       <div class="roundbottom">
    	 <img src="Borders/bl2.gif" alt="" 
    	 width="15" height="15" class="corner" 
    	 style="display: none">
       </div>
    </div>	
    
    
    <!--Catalogue -->  
    <div class="roundcont2">
       <div class="roundtop">
    	 <img src="Borders/bl2.gif" alt="" 
    	 width="15" height="15" class="corner" 
    	 style="display: none">
       </div>
    <img src="images/catalog 06 cover.jpg" class="floatRight">
    <p><b>Product Catalogue</b><br>
    Use the menu on the right to check out our extensive product range. <br><br>
    <a href="catalogcurrentsimple.htm">
        &gt If your browser doesn't support java, you can view
        our catalog in HTML format here.</a>
    </p>
       <div class="roundbottom">
    	 <img src="Borders/bl2.gif" alt="" 
    	 width="15" height="15" class="corner" 
    	 style="display: none">
       </div>
    </div>	
    
    </div> <!-- end of content div-->

    It all looks fine in Firefox, IE is not happy though. I am just not CSS fluent enough to know if the problem is my code or the crapness of IE.

    Hopefully there's a simple fix for this kind of thing.

    Thanks in advance for any help with this, I'll leave the file that I've linked here permanently up on the server for anyone else who may be helped by advice given in this thread.
    Last edited by Lollygag; 05-09-2007 at 03:09 AM.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Instead of this
    Code:
    #VertMenu {
    	background: transparent; 
    	float: left;
    	width: 150px;
    	padding: 0px 0px 0px 0px;
    	position: absolute;
    	margin: 0px 0 auto;
    }
    .roundcont {
    	margin: 0px 155px;
    	width: 579px;
    	background-color: #f0f0f0;
    	color: #53565d;
    }
    .roundcont2 {
    	margin: 7px 0px;
    	width: 734px;
    	background-color: #f0f0f0;
    	color: #53565d;
    }
    try this:
    Code:
    #VertMenu {
    	float: left;
    	width: 150px;
    }
    .roundcont {
    	width: 579px;
    	background-color: #f0f0f0;
    	color: #53565d;
    	float: left;
    }
    .roundcont2 {
    	margin: 7px 0px;
    	width: 734px;
    	background-color: #f0f0f0;
    	color: #53565d;
    	clear: both;
    }
    I don't see the rounded corners. The GIF image for the corner seems to be completely tranparent?

  • #7
    New Coder
    Join Date
    May 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Koyama! She works perfect now, I was on the verge of dedicating the remainder of my existence to annhilating all traces of IE from the face of the planet to avenge the the brain damage it was causing me. I wish I buy you a few beers for that, Copenhagens a long way from Bondi, but if yer ever in town with a thirst PM me, we got some fantastic red wines round here.

    Yah, the missing round corners, atm only the right hand side corners are rounded, but I've left the transparent gifs in case I ever want to put the left side ones back in. I got the code from here: http://www.w3.org/Style/Examples/007/roundshadow.html , also got the bones of vert menu code from there.

    What's the etiquette on using & modifying other people's code & ideas to carry my own design like this?


  •  

    Posting Permissions

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