CSS Problems In Internet Explorer

  • The Apostle of God
  • Beginner
  • Beginner
  • User avatar
  • Posts: 54
  • Loc: SDSU, SD, USA

Post 3+ Months Ago

Sorry to ask yet more (:shock:) questions, especially when I know the answer will be so easy. I've got a three column layout using css (the css checks out as valid css2 according to w3's validator). Problem is, in internet explorer, it shoves the third column beneath the first one :cry:

Here is my css:
Code: [ Select ]
/* Properties that both side lists have in common */
#banner {
    position: fixed;
    top: 00px;
    margin-left: 16px;
    }
div.link-list1
        {
    text-align: right;
    width:133px;
    position:absolute;
    top:150px;
    font-size:80%;
    padding-left:1%;
    padding-right:1%;
    margin-left:0;
    margin-right:0;
    color: #bccbdc;
    left:12px;
    visibility: inherit;
        }
div.link-list2
        {
    width:133px;
    position:fixed;
    top:150px;
    font-size:80%;
    padding-left:1%;
    padding-right:1%;
    left:650px;
    margin-right:0;
    color: #bccbdc;
    
        }        
#main {
    position: fixed;
    top: 150px;
    width:500px;
    margin-left: 133px;
    padding-left:1em;
    padding-right:1em;
    }

BODY     
    {
    color:#bccbdc;
    BACKGROUND-COLOR: #000000;
    }
A:link
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:active
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:visited
    {
    COLOR: silver; TEXT-DECORATION: underline
    }
A:hover {
    COLOR: #597795; TEXT-DECORATION: underline
    }
  1. /* Properties that both side lists have in common */
  2. #banner {
  3.     position: fixed;
  4.     top: 00px;
  5.     margin-left: 16px;
  6.     }
  7. div.link-list1
  8.         {
  9.     text-align: right;
  10.     width:133px;
  11.     position:absolute;
  12.     top:150px;
  13.     font-size:80%;
  14.     padding-left:1%;
  15.     padding-right:1%;
  16.     margin-left:0;
  17.     margin-right:0;
  18.     color: #bccbdc;
  19.     left:12px;
  20.     visibility: inherit;
  21.         }
  22. div.link-list2
  23.         {
  24.     width:133px;
  25.     position:fixed;
  26.     top:150px;
  27.     font-size:80%;
  28.     padding-left:1%;
  29.     padding-right:1%;
  30.     left:650px;
  31.     margin-right:0;
  32.     color: #bccbdc;
  33.     
  34.         }        
  35. #main {
  36.     position: fixed;
  37.     top: 150px;
  38.     width:500px;
  39.     margin-left: 133px;
  40.     padding-left:1em;
  41.     padding-right:1em;
  42.     }
  43. BODY     
  44.     {
  45.     color:#bccbdc;
  46.     BACKGROUND-COLOR: #000000;
  47.     }
  48. A:link
  49.     {
  50.     COLOR: #597795; TEXT-DECORATION: underline
  51.     }
  52. A:active
  53.     {
  54.     COLOR: #597795; TEXT-DECORATION: underline
  55.     }
  56. A:visited
  57.     {
  58.     COLOR: silver; TEXT-DECORATION: underline
  59.     }
  60. A:hover {
  61.     COLOR: #597795; TEXT-DECORATION: underline
  62.     }

Here is the html:
Code: [ Select ]
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "3column.css";
</style>
</head>

<body>
<div id="banner">
<img src="/images/logo.jpg" alt="Logo" width="770" height="115" />
</div>
<div class="link-list1"> <img src="/images/nav.gif" alt="Navigation" /><br />
 - <a href="http://www.theapostleofgod.com" >Home</a> <br />
 - <a href="/tos">Original Series</a> <br />
 - <a href="/tng/index.html"> Next Generation</a> <br />
 - <a href="/ds9">Deep Space 9</a> <br />
 - <a href="/voy">Voyager</a> <br />
 - <a href="/ent">Enterprise</a> <br />
 - <a href="/mov">Movies</a> <br />
 - <a href="/forums/">Forums</a> <br />
 - <a href="/store/">Store</a> <br />
 - <a href="/about/">FAAQ</a> </div>
<div id="main">

<img src="http://theapostleofgod.com/mov/tmp/tmpfull/0001t.jpg" /> <img src="http://theapostleofgod.com/mov/tmp/tmpfull/0001t.jpg" />
 <p class="main">
This is a test page :) This is only a test. Stop making fun
  of me! Checking to see if it wrap... yes, it does!</p>
</div>
<div class="link-list2">
    <img src="/images/links.gif" width="133" height="30" alt="links" />
    - <a href="http://www.section31.com" title="Section 31 appears to be down.">Section 31</a> <br />
    - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega Project</a> <br />
    - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek Today</a> <br />
    - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN </a><br />
    - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
</div>

</body>
</html>
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <style type="text/css">
  8. @import "3column.css";
  9. </style>
  10. </head>
  11. <body>
  12. <div id="banner">
  13. <img src="/images/logo.jpg" alt="Logo" width="770" height="115" />
  14. </div>
  15. <div class="link-list1"> <img src="/images/nav.gif" alt="Navigation" /><br />
  16.  - <a href="http://www.theapostleofgod.com" >Home</a> <br />
  17.  - <a href="/tos">Original Series</a> <br />
  18.  - <a href="/tng/index.html"> Next Generation</a> <br />
  19.  - <a href="/ds9">Deep Space 9</a> <br />
  20.  - <a href="/voy">Voyager</a> <br />
  21.  - <a href="/ent">Enterprise</a> <br />
  22.  - <a href="/mov">Movies</a> <br />
  23.  - <a href="/forums/">Forums</a> <br />
  24.  - <a href="/store/">Store</a> <br />
  25.  - <a href="/about/">FAAQ</a> </div>
  26. <div id="main">
  27. <img src="http://theapostleofgod.com/mov/tmp/tmpfull/0001t.jpg" /> <img src="http://theapostleofgod.com/mov/tmp/tmpfull/0001t.jpg" />
  28.  <p class="main">
  29. This is a test page :) This is only a test. Stop making fun
  30.   of me! Checking to see if it wrap... yes, it does!</p>
  31. </div>
  32. <div class="link-list2">
  33.     <img src="/images/links.gif" width="133" height="30" alt="links" />
  34.     - <a href="http://www.section31.com" title="Section 31 appears to be down.">Section 31</a> <br />
  35.     - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega Project</a> <br />
  36.     - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek Today</a> <br />
  37.     - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN </a><br />
  38.     - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
  39. </div>
  40. </body>
  41. </html>

so yeah, link-list2 is supposed to go right, but it stays left and hits the hay below link-list1 in internet explorer.
http://www.theapostleofgod.com/xhtml.html
Ideas?

Thanks.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23455
  • Loc: Woodbridge VA

Post 3+ Months Ago

I think #main is what's screwing you up (glancing quickly) - First of all, I don't understand why you didn't do it the same way as the other column classes. Second, you have it as an ID but you call it as a class in the html document. Third although you have a left margin, you don't have a left attribute defined for #main.

Work your way through that angle and you'll probably solve your problem.
  • gilray4
  • Novice
  • Novice
  • gilray4
  • Posts: 17
  • Loc: Hawai'i

Post 3+ Months Ago

Aloha: I was going to mess with your code actually had the html and stylesheet on my desk but I said whoa I have way to much on my plate for this right now> I don't know the answer to the issue however I have many suggestions/ observations. 1st I don't understand how this div works at all> div. link-list1{ this is a confusion of syntax} either #div{ with id in the html.... or .link-list1{ with class=" in the html.
why do you code your images into the html instead of the css, this is self defeating to the benefits of css! why on a page with so much "open realestate" do you want a " fixed" layout when you have all the room in the world for a more simple and better performing "liquid" layout> float those nav menu's! A note to the cautious here> remember that the purpose of a "fixed" div is to render it as "non-scrolling" however IE does not support this so in IE a fixed or absoloute div will perform the same function but not in gecko based browsers such as mozilla (so be careful to check for cross browser compliance of the effect your looking for)! Another suggestion for code bulk reduction, learn some of the short hand options of css, they seem wierd and confusing at first, but did'nt css>? anyway- after a bit you'll love'm example: for your links you can reduce code like this>

a, a:active, a:hover{color: #597795;}
a:visited{color:silver;} note* text undeline is default in all aspects of an href tag so no need repeat four times what the browser allready does by default.

anyway> sorry back to your positioning issue, Have a try at this, make your center col {position:relative;} and your 2 side col's/ div's {position:absolute;} "not fixed"
and a last note or 2> I have many times helped people with positoning where they were of the html mind set, where they had a typical problem with "why does this div jump below that pevious div, when they are suppossed to position themselves next to each other" a quick look 9 times out of 10 reveals simply they closed the one div and began another instead of setting one inside the other, or ie: don't close the first div till after the secondary.

Ps. I don't understand why so many people are so "class happy" with css. I try to only use id and save class as a finite "tweaker" option, but if you must use class, I have had rare issues with certain browsers where they did'nt get along to well with numerals in a class title, I see no reason not to avoid the practise so> I just as a rule try to keep numerals out of my styles altogether>>>>>>>.

Hope all this longwindedness was worth it !

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 34 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
 
cron
 

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