Div aligning problem

SniperTowers · #1 (**permalink**) 01-17-09, 07:11 PM

Here is my site:

www.shuffledrive.co.uk/mel

I have div aligning problems in IE 7 the main content sits underneath the sidebars. But in Firefox 3 it is fine.

Now I'm using a php script the main content is defined by any div it just shows up eg. defined by body css (if you know what I mean). How come I'm having positioning problems in IE7 but not in Firefox 3?
How do I fix it?

SniperTowers · #2 (**permalink**) 01-18-09, 01:11 PM

can anyone help with this?

groone · #3 (**permalink**) 01-18-09, 02:21 PM

Yea, IE handles things a bit differently then Firefox Lets imagine that this is the edge of your div |

padding: 5px

Firefox measures like this

<----5px-----|

IE measures like this

|<----5x------

As you see, this can throw everything askew. IE will not fix this so the best thing to do would be to create a style entry that only IE can read

Do your style like normal

Code:

<style type="text/css">
  .element{
     padding: 5px;
  }
</style>

And then do a style for IE like this

Code:

<!--[if IE]>
<style type="text/css">
  .element{
     padding: 0px;
     margin-left: 5px;
  }
</style>
<![endif]-->

For IE your css element will be rewritten with the new settings.

If you are using a style sheet then you can do the same thing

Code:

<link href="http://www.yoururl.com/css/firefox.css" rel="stylesheet" type="text/css" >
<!--[if IE]>
<link href="http://www.yoururl.com/css/ie.css" rel="stylesheet" type="text/css" >
<![endif]-->

You can write a separate style sheet for IE and only IE will read it and still maintain the settings for Firefox

SniperTowers · #4 (**permalink**) 01-18-09, 03:10 PM

Thank you so much, but /i've rewitten it and it still appears to be the same in IE :S

groone · #5 (**permalink**) 01-18-09, 03:20 PM

You have to make sure that you use the same element name and clear out any options that are listed in it.

if you use Firefox, download the Firebug addon...there might be something else that is causing the misalignment.

SniperTowers · #6 (**permalink**) 01-19-09, 03:26 PM

Can anyone else help?

ajit22 · #7 (**permalink**) 01-31-09, 01:50 AM

This would normally be done using floats (unless you want to go down the route of absolute positioning). The 'reactiveness" is one of the advantages of using floats, combined with clear.
For example:

Code:

#div1 { float: left; }
#div2 { float: left; }

<div id="div1">Hello</div>
<div id="div2">World</div>

hope it is exactly as you looking for.

job0107 · #8 (**permalink**) 02-01-09, 03:25 AM

Your display is basically a three column display.
So you need to create three columns.
You could easily do that with a table with one row and three cells.
Or you could use three div's floated left.

I decided to use three div's.

This is the simplest way I could figure to set it up.
Besides changing your layout, I only made a few small changes.
And one big change ( I removed most of the black space on either side of your logo image and put it in an image element instead of the div's background).
That gave me a lot more control over it.

Here is the code:

HTML Code:

<html>
<head>
<style>
body {
margin:0px;
background-color:#101010;
color:#ffffff;
font-family: Tahoma;
font-size: 14px;
}
#column_1 {
width:26%;
float:left;
}
#column_2 {
width:47%;
float:left;
text-align:center;
}
#column_3 {
width:26%;
float:left;
}
#nav {
background:#81C524 url('http://www.shuffledrive.co.uk/mel/images/nav456.gif') repeat-x;
height:40px; /*The height of the menu */
line-height:40px; /*The line-height property sets the distance between lines.*/
text-decoration:none;
}
#nav ul {
list-style:none;
margin:0;
padding:0 0 0 20px;
}
#nav ul li {
display:inline;
}
#nav ul li a {
padding:0 12px;
}
a:visited {
   color:#ffffff;
   text-decoration:none;
}
a:link {
   color:#ffffff;
   text-decoration:none;
}
a:hover {
   color:#a0a0a0;
   text-decoration:none;
}
a:active {
   color:#ffffff;
   text-decoration:none;
}
.sidebar_left {
width:201px;
margin-left:30px;
background: url('http://www.shuffledrive.co.uk/mel/images/mid.png') repeat-y;
}
.sidebar_right {
width:201px;
margin-left:30px;
background: url('http://www.shuffledrive.co.uk/mel/images/mid.png') repeat-y;
}
.sidebartext {
text-align:center;
}
.sidebar_bottom {
width: 201px;
margin-left:30px;
}
.offers {
display:block;
}
#footer{
clear:both;
height:40px;
background: #81C524 url('http://www.shuffledrive.co.uk/mel/images/nav456.gif') repeat-x;
}
</style>
</head>
<body>
<div class="sidebartext">
 <img src="images/logo.jpg" />
</div>
<div id="nav">
 <ul>
  <li><a href="index.php">Home</a></li>
  <li><a href="register.php">Register</a></li>
  <li><a href="login.php">Login</a></li>
  <li><a href="members.php?offers=42">Members</a></li>
  <li><a href="members.php?offers=42">Easy Cash</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="terms.php">T&C's</a></li>
  <li><a href="contact.php">Contact Us</a></li>
 </ul>
</div>
<div id="column_1">
 <div class="sidebar_left">
  <img src="http://www.shuffledrive.co.uk/mel/images/cat.png" alt="categories" border="0"/>
  <div class="sidebartext">
   <a class="offers" href="offers.php?offers=42"><b>Easy Cash</b></a>
   <a class="offers" href="offers.php?offers=26">Accommodation</a>
   <a class="offers" href="offers.php?offers=27">Adult</a>
   <a class="offers" href="offers.php?offers=30">Arts and Crafts</a>
   <a class="offers" href="offers.php?offers=31">Books and Catalogues</a>
   <a class="offers" href="offers.php?offers=32">Business Services</a>
   <a class="offers" href="offers.php?offers=33">Business Supplies</a>
   <a class="offers" href="offers.php?offers=25">Charities</a>
   <a class="offers" href="offers.php?offers=24">Children</a>
   <a class="offers" href="offers.php?offers=23">Clothing</a>
   <a class="offers" href="offers.php?offers=22">Competitions</a>
   <a class="offers" href="offers.php?offers=21">Computers</a>
   <a class="offers" href="offers.php?offers=16">Designer Clothing</a>
   <a class="offers" href="offers.php?offers=17">Education</a>
   <a class="offers" href="offers.php?offers=18">Electrical Goods</a>
   <a class="offers" href="offers.php?offers=19">Fashion</a>
   <a class="offers" href="offers.php?offers=20">Finance and Legal</a>
   <a class="offers" href="offers.php?offers=15">Food and Drink </a>
   <a class="offers" href="offers.php?offers=7">Freebies</a>
   <a class="offers" href="offers.php?offers=6">Gadgets and Other Gifts</a>
   <a class="offers" href="offers.php?offers=14">Gambling</a>
   <a class="offers" href="offers.php?offers=13">Gaming</a>
   <a class="offers" href="offers.php?offers=11">Gifts</a>
   <a class="offers" href="offers.php?offers=12">Health and Beauty</a>
   <a class="offers" href="offers.php?offers=41">Holidays</a>
   <a class="offers" href="offers.php?offers=5">Home and Garden</a>
   <a class="offers" href="offers.php?offers=40">Loans</a>
   <a class="offers" href="offers.php?offers=44">Magazines</a>
   <a class="offers" href="offers.php?offers=10">Mobiles Phones</a>
   <a class="offers" href="offers.php?offers=9">Motoring</a>
   <a class="offers" href="offers.php?offers=8">Music and Video</a>
   <a class="offers" href="offers.php?offers=38">Online Services</a>
   <a class="offers" href="offers.php?offers=34">Pets</a>
   <a class="offers" href="offers.php?offers=43">Posters & Prints</a>
   <a class="offers" href="offers.php?offers=35">Sports and Fitness</a>
   <a class="offers" href="offers.php?offers=39">Sports Equipment</a>
   <a class="offers" href="offers.php?offers=36">Tickets and Events</a>
   <a class="offers" href="offers.php?offers=47">Toy Shops</a>
   <a class="offers" href="offers.php?offers=37">Travel</a>
  </div>
 </div>
 <div class="sidebar_bottom">
  <img src="http://www.shuffledrive.co.uk/mel/images/bott.png" alt="categories" />
 </div>
</div>
<div id="column_2">
 <img src="http://www.shuffledrive.co.uk/mel/images/frontpage.jpg" alt="image" />
</div>
<div id="column_3">
 <div class="sidebar_right">
  <img src="http://www.shuffledrive.co.uk/mel/images/member.png" alt="categories" />
  <div class="sidebartext">
   <form method="post" action="">
     Username: <br><input type="text" name="username"><br>
     Password: <br><input type="password" name="password"><br>
     <input type="submit" value="Login" name="login">
    </form>
  </div>
  <img src="http://www.shuffledrive.co.uk/mel/images/bott.png" alt="categories" />
  <img src="http://www.shuffledrive.co.uk/mel/images/stat.png" alt="categories" />
  <div class="sidebartext">
   <p>Total Users: 14<br>Total Offers: 61<br>Accounts Balance: £31.70</p>
  </div>
  <img src="http://www.shuffledrive.co.uk/mel/images/bott.png" alt="categories" />
 </div>
</div>
<div id="footer"></div>
</body>
</html>

I have attached the edited logo image.