deltahawk12 Posted August 27, 2006 Share Posted August 27, 2006 Alright heres my third problem. Ive got these sidebars that i want to add in. Its a pieace of cake coding it for Firefox but when testing it in IE it turns out horrible. Heres my code below. As you can see the sidebars are postion outside the center id. Now when i put the rest of my code with these peices below i get the sidebars the on far side of the page. thats what i want but then when i try to add a margin to bring them closer to the content in the center id, i get differrernt results in both firefox and IE. any help with this would be great, thanksMy CSS body{color: #FFFFFF;background-image: url(images/bg.jpg);font-family: Sans-Serif;font-size: small;}#center2{width:1000px;}#sidebar1{float: left;}#sidebar3{float:right;}#center{margin:auto;margin-right: 17%;margin-left: 17%;width: 650px;height: 1000px;background-color:#9fb910;} The Html <!--Centers the sidebars--><div id="center2"><img src="images/sidebar1.jpg" id="sidebar1"/><img src="images/sidebar3.jpg" id="sidebar3"/><!--Centers the site--><div id="center"><!--Navigation Bar--><div class="navcenter2"><p><a href="TDN.html"><img src="images/header.jpg" alt="Banner" id="pad" border="0" class="header"/></a><br /><a href="TDN.html"><img src="images/navigationbar/home.jpg" alt="Home link" id="pad" /></a><a href="gallery/gallery.html"><img src="images/navigationbar/gallery.jpg" alt="gallery link" id="pad" /></a><a href="forum.html"><img src="images/navigationbar/forum.jpg" alt="forum link" id="pad" /></a><a href="staff/staff.html"><img src="images/navigationbar/staff.jpg" alt="staff link" id="pad" /></a><a href="downloads/downloads.html"><img src="images/navigationbar/downloads.jpg" alt="downloads link" id="pad" class="navheight" /></a></p> Link to comment Share on other sites More sharing options...
aquatsr Posted August 27, 2006 Share Posted August 27, 2006 Here's what I came up with. You'll have to mess with it to get it looking like you want, but it looks the same in both IE and FF. Good luck!CSS File: body{color: #FFFFFF;background-image: url(images/bg.jpg);font-family: Sans-Serif;font-size: small;margin: 0 auto;}#center2{width:800px;text-align: center;}#sidebar1{float: left;}#sidebar3{float:right;}#center{margin: auto;width: 650px;height: 1000px;background-color:#9fb910;} HTML File: <!-- DOCUMENT VERIFICATION GOES HERE --><html><link rel="stylesheet" type="text/css" href="test.css" /><body><!--Centers the sidebars--><div id="center2"><img src="images/sidebar1.jpg" id="sidebar1"/><img src="images/sidebar3.jpg" id="sidebar3"/><!--Centers the site--><div id="center"><!--Navigation Bar--><div class="navcenter2"><p><a href="TDN.html"><img src="images/header.jpg" alt="Banner" id="pad" border="0" class="header"/></a><br /><a href="TDN.html"><img src="images/navigationbar/home.jpg" alt="Home link" id="pad" /></a><a href="gallery/gallery.html"><img src="images/navigationbar/gallery.jpg" alt="gallery link" id="pad" /></a><a href="forum.html"><img src="images/navigationbar/forum.jpg" alt="forum link" id="pad" /></a><a href="staff/staff.html"><img src="images/navigationbar/staff.jpg" alt="staff link" id="pad" /></a><a href="downloads/downloads.html"><img src="images/navigationbar/downloads.jpg" alt="downloads link" id="pad" class="navheight" /></a></p></body></html> Link to comment Share on other sites More sharing options...
deltahawk12 Posted August 27, 2006 Author Share Posted August 27, 2006 I dont think you exactly know what im trying to do. These two Ids below. Im trying to add margins to them, the only problem is that firefox and IE have different Value results. Try puting a margin-left: 50%; In sidebar 1 and open it in both IE and firefox. You get different results. Firefox moves the sidebar like a couple of pixels over while IE moves it 3/4th across the page #sidebar1{float: left;}#sidebar3{float:right;} Link to comment Share on other sites More sharing options...
deltahawk12 Posted August 27, 2006 Author Share Posted August 27, 2006 woops for the double post but heres the code that im talking about #sidebar1{margin-left: 15.5%;float: left;}#sidebar3{margin-right: 14.5%;float:right;} See in IE the bars are perfect and their right next to the content but in firefox the bars only have moved a few pixels Link to comment Share on other sites More sharing options...
aquatsr Posted August 28, 2006 Share Posted August 28, 2006 Oh. Yeah I see. Perhaps you should use absolute positioning. Firefox and IE interpret percents differently, so I tend not to use them when trying to make a cross-browser site. Link to comment Share on other sites More sharing options...
deltahawk12 Posted August 28, 2006 Author Share Posted August 28, 2006 Oh. Yeah I see. Perhaps you should use absolute positioning. Firefox and IE interpret percents differently, so I tend not to use them when trying to make a cross-browser site.yea i thought i could use that too but with different screen sizes and resolutions i get different results. I fixed the problem by using pixels instead. I got the same results in both IE and firefox. thanks for the help though, ill definitly PM you next time I need your help. Ill be uploading the site tomorrow. wish my luck Link to comment Share on other sites More sharing options...
aquatsr Posted August 28, 2006 Share Posted August 28, 2006 OK, Cool. Glad to see you got it working. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now