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
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Unhappy IE / Firefox layout - help please

    as you can see my website, the left collumn is in teh center in IE and looks alright in Firefox: http://www.mypubspace.com/wr/

    why is this and can someone please help?!

    css:
    Code:
    /* CSS Document */
    body{
    background-color:#000000;
    }
    #Wrapper{
    margin: auto;
    width:1024px;
    height:768px;
    border:#666666 thin solid;
    background-image:url(../images/bg.gif);
    background-repeat:repeat-x;
    }
    #top_left{
    clear:both;
    float:left;
    width:403px;
    height:246px;
    background-image:url(../images/top_left.jpg);
    background-repeat:no-repeat;
    }
    #top_right{
    width:621px;
    height:246px;
    background-image:url(../images/top_right.jpg);
    background-repeat:no-repeat;
    float:right;
    }
    #opacity_nav{
    width:621px;
    height:28px;
    background-color:#000000;
    opacity:0.4;filter:alpha(opacity=30);
    margin-top:100px;
    z-index:0;
    }
    #linksinnavbox
    {
    padding-left:15px;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
    a.nav:link{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    font-weight:bold;
    z-index:0;
    }
    a.nav:active{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    font-weight:bold;
    }
    a.nav:hover{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    font-weight:bold;
    }
    a.nav:visited{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFFFFF;
    font-weight:bold;
    }
    #leftcollumn
    {
    float:left;
    clear:both;
    position:absolute;
    width:200px;
    height:582px;
    margin-top:184px;
    border-right:#333333 2px groove;
    border-top:#333333 2px groove;
    background-color:#000000;
    opacity:0.4;filter:alpha(opacity=30);
    color:#FF6600;
    }
    #center
    {
    	left:340px;
    	top:200px;
    	position:absolute;
    	width:590px;
    	height:480px;
    	z-index:0;
    	border-top: 2px groove #333333;
    	border-bottom: 2px inset #333333;
    }
    #ad
    {
    left:330px;
    float:left;
    clear:both;
    position:absolute;
    width:570px;
    height:110px;
    padding:10px;
    top:680px;
    }
    #rightad
    {
    position:absolute;
    width:180px;
    height:570px;
    margin-bottom:50px;
    background-color:#333333;
    border: thin #000000 solid;
    float:right;
    clear:all;
    top:198px;
    left:945px;
    }
    #headertext
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
    color:#FFFFFF;
    padding-top:20px;
    padding-left:20px;
    border-bottom:#FFFFFF 1px solid;
    }
    #contenttext_right
    {
    clear:both;
    width:95%;
    height:400px;
    float:right;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFFFFF;
    padding-top:20px;
    padding-left:20px;
    scrollbar-3dlight-color:#fff;
    scrollbar-arrow-color:#fff;
    scrollbar-base-color:#fff;
    scrollbar-darkshadow-color:#fff; 
    scrollbar-face-color:#666666;
    scrollbar-highlight-color:#fff;
    scrollbar-shadow-color:#fff;
    overflow: auto;
    }
    #mainpic{
    float:left;
    width:348px;
    height:279px;
    float:left;
    }

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    if you dont mind me asking whu are you positioning the left nav absolutely? You probably dont need to do that. here is a great site for layouts with 3 columns http://blog.html.it/layoutgala/ .

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    thanks but the site is in italian, i removed the absolute positioning and i am still having problems?!

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    ok, try this, just replace this with the old one

    Code:
    #leftcollumn
    {
    float:left;
    clear:left;
    position:relative;
    width:200px;
    height:582px;
    margin-top:0px;
    border-right:#333333 2px groove;
    border-top:#333333 2px groove;
    background-color:#000000;
    opacity:0.4;filter:alpha(opacity=30);
    color:#FF6600;
    }

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    thanks, I think i messed up the HTML, could you please have a look at the HTML?

    Code:
    <body>
    <div id="Wrapper">
    		
    		<div id="top_left"></div>
    		<div id="leftcollumn">lefter</div>	
    		<div id="top_right"><div id="opacity_nav">
    				<div id="linksinnavbox"><a href="#" class="nav">hello</a>				
    			</div>		
    		</div>
    			
    				<div id="center"><div id="headertext">Staples to Naples</div>
    				<div id="contenttext_right"><div id="mainpic"><img src="images/mapmain.jpg" border="0" title="Staples to Naples" alt="Staples to Naples" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ante massa, auctor eu, rhoncus commodo, tempus non, ipsum. Sed sollicitudin, augue ac bibendum dapibus, tortor lectus dapibus dolor, sed vulputate ligula nibh vel elit. Phasellus dolor. Donec nec neque sed diam hendrerit venenatis. Vivamus mattis est sed diam. Nullam et augue. Quisque consectetuer laoreet purus. Aenean varius libero ut nunc. Donec quam viverra eleifend bibendum.
    
    Start :: Calais – France
    Finish :: Naples – Italy
    Miles :: 1450
    Days :: 5</div></div>
    		  </div></div>
      </div>
    		
    			
    		<div id="ad">
    		<img src="images/eclipse_logo.jpg" alt="Eclipse leisure" title="Eclipse Leisure" border="0" />
    		<img src="images/medecins_logo.jpg" alt="Medecins Sans Frontiers" title="Medecins Sans Frontiers" border="0" />
    		<img src="images/aa_logo.jpg" alt="The AA" title="The AA" border="0" />
    		<img src="images/fb_logo.jpg" alt="FaceBook" title="FaceBook" border="0" />
    		<img src="images/justgiving_logo.jpg" alt="Just Giving" title="Just Giving" border="0" />
    		</div>
    		<div id="rightad">right ad</div>
    		
    </div></div></div>
    </div>
    </body>

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    yeah, it looks as if you need to take the left column out of the top divs, and place it right below them, because i guess it was absolute positioned so you put it anywhere but now it matters, see how that works!!

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    the answer is dont support Firefox lol
    Firefox was a grate idear but i have never got div styles to work
    but i dont know how to do it but you can try XSL it might work better


  •  

    Posting Permissions

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