Space in Internet Explorer

  • Jackend
  • Newbie
  • Newbie
  • Jackend
  • Posts: 11

Post 3+ Months Ago

On my site
http://www.nuevex.com/
The layout is fine and dandy[minus the crappyness of it] in a firefox browser but in Internet Explorer there is space between the banner and the sidebars

Anything I can do to fix this?


Thankss =]
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Jackend
  • Newbie
  • Newbie
  • Jackend
  • Posts: 11

Post 3+ Months Ago

Anyone?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Why are you using tables for your layout ... ? How far are you into this project? Is there still time for you to rather switch to CSS and DIVs?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

If you're going to use TABLEs as a layout method, go ahead and table everything.

My real suggestion, though, would be to start over, as r_t says, using DIVs as containers. That space image should be left as one image, and used in the background.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

And just as an added bonus, we actually have a tutorial on that layout right here on ozzu thanks to dM: linky
  • Jackend
  • Newbie
  • Newbie
  • Jackend
  • Posts: 11

Post 3+ Months Ago

Ah ty, I can easily go back.
I am not that far, since right now im on a trip and im only doing work here and there.
Thanks =]
  • Jackend
  • Newbie
  • Newbie
  • Jackend
  • Posts: 11

Post 3+ Months Ago

Ah, it still doesnt help with the space between the banner and the side bar problem though Css or not
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

I don't see any space in there on Firefox...

In IE 6 I see what you mean...

Try this for CSS
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nuevex</title>
<style type="text/css">
<!--
body {
    background-color: #999999;
    margin-left: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    width: 950px;
    text-align: top;
}

#banner {
    background-image: url('images/Nuevex_Banner.png');
    width: 950px;
    height: 120px;
}

#left_bar {
    background-image: url('images/LeftBar.png');
    float: left;
    width: 150px;
    height: 651px;
}

#content {
    float: left;
    width: 640px;
    height: 640.5px;
    padding: 5px 5px 5px 5px;
    background-color: #888888;
}

#right_bar {
    background-image: url('images/RightBar.png');
    float: left;
    width: 150px;
    height: 650px;
}

#footer {
    clear: both;
}
-->
</style
></head>

<body>
<div id="banner">

</div>
<div id="left_bar">

</div>
<div id="content">
<p>TEXT</p>
</div>
<div id="right_bar">

</div>
<div id="footer">

</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Nuevex</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.     background-color: #999999;
  10.     margin-left: auto;
  11.     margin-top: 0px;
  12.     margin-right: auto;
  13.     margin-bottom: 0px;
  14.     width: 950px;
  15.     text-align: top;
  16. }
  17. #banner {
  18.     background-image: url('images/Nuevex_Banner.png');
  19.     width: 950px;
  20.     height: 120px;
  21. }
  22. #left_bar {
  23.     background-image: url('images/LeftBar.png');
  24.     float: left;
  25.     width: 150px;
  26.     height: 651px;
  27. }
  28. #content {
  29.     float: left;
  30.     width: 640px;
  31.     height: 640.5px;
  32.     padding: 5px 5px 5px 5px;
  33.     background-color: #888888;
  34. }
  35. #right_bar {
  36.     background-image: url('images/RightBar.png');
  37.     float: left;
  38.     width: 150px;
  39.     height: 650px;
  40. }
  41. #footer {
  42.     clear: both;
  43. }
  44. -->
  45. </style
  46. ></head>
  47. <body>
  48. <div id="banner">
  49. </div>
  50. <div id="left_bar">
  51. </div>
  52. <div id="content">
  53. <p>TEXT</p>
  54. </div>
  55. <div id="right_bar">
  56. </div>
  57. <div id="footer">
  58. </div>
  59. </body>
  60. </html>

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 60 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.