Trouble w/ Mozilla

  • NeverBC
  • Born
  • Born
  • NeverBC
  • Posts: 1

Post 3+ Months Ago

I've been trying to find the bug in my css and html for about 3 or 4 hours now, but can't seem to fix it. I have only recently learned CSS + HTML so I'm hoping someone with a bit more experience can lend a hand. There are 2 problems (apparently), one the buttons do not line up like along the top and also the sidebar column is not placed correctly.

Here is a screen grab in IE:

Image


Here is a screen grab in Mozilla:

Image


The CSS file is here: CCS File


The HTML for that part:
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" />
<meta name="generator" content="http://www.movabletype.org/" />
<link rel="stylesheet" href="neverbc.css" type="text/css" />
<title>Never Be Complete - Contact Page</title>    
</head>

<body>
<div id="container">
    <div id="title"></div>
    <div id="button_bar">
        <ul id="buttons">
        <li id="tweblog"><a href="index.html">Home</a></li>
        <li id="tabout"><a href="about.html">About</a></li>
        <li id="tplanning"><a href="planning.html">Planning</a></li>
        <li id="tphotos"><a href="photos.html">Photos</a></li>
        <li id="tsupport"><a href="support.html">Support</a></li>
        <li id="tchallenge"><a href="challenges.html">Challenge</a></li>            
        <li id="tcontact"><a href="contact.html">Contact</a></li>            
        <li id="tclock">&nbsp;158 Days Until The Trip</li>
        </ul>
    </div>
    <div id="title_bottom"></div>
    <div id="content">
        <h4>Email</h4><p>If you have something more personal or lengthy to say, hit me up with an email.
        Once the trip has started, my response to emails won't probably be as fast nor as lengthy as I would like, but you can still reach me at
        <a href="mailto:mail[@]neverbecomplete.com?subject=Remove the []s first!!!">mail @ neverbecomplete.com</a>
        Just be sure to remove the []'s in the address, I've put them in there to ward of spam bots.</p>
    </div>
    <div id="sidebar">
        <h2>About Me</h2>
        <ul>
        <li>-<a href="about.html">Why?</a></li>
        <li>-<a href="about.html#Wants">What I want</a></li>
        <li>-<a href="http://www.neverbecomplete.com/files/neverbecomplete.swf">Movie Intro</a></li>
        <li>-<a href="photos.html">Photo's</a></li>
        </ul>
    </div>
</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. <meta name="generator" content="http://www.movabletype.org/" />
  6. <link rel="stylesheet" href="neverbc.css" type="text/css" />
  7. <title>Never Be Complete - Contact Page</title>    
  8. </head>
  9. <body>
  10. <div id="container">
  11.     <div id="title"></div>
  12.     <div id="button_bar">
  13.         <ul id="buttons">
  14.         <li id="tweblog"><a href="index.html">Home</a></li>
  15.         <li id="tabout"><a href="about.html">About</a></li>
  16.         <li id="tplanning"><a href="planning.html">Planning</a></li>
  17.         <li id="tphotos"><a href="photos.html">Photos</a></li>
  18.         <li id="tsupport"><a href="support.html">Support</a></li>
  19.         <li id="tchallenge"><a href="challenges.html">Challenge</a></li>            
  20.         <li id="tcontact"><a href="contact.html">Contact</a></li>            
  21.         <li id="tclock">&nbsp;158 Days Until The Trip</li>
  22.         </ul>
  23.     </div>
  24.     <div id="title_bottom"></div>
  25.     <div id="content">
  26.         <h4>Email</h4><p>If you have something more personal or lengthy to say, hit me up with an email.
  27.         Once the trip has started, my response to emails won't probably be as fast nor as lengthy as I would like, but you can still reach me at
  28.         <a href="mailto:mail[@]neverbecomplete.com?subject=Remove the []s first!!!">mail @ neverbecomplete.com</a>
  29.         Just be sure to remove the []'s in the address, I've put them in there to ward of spam bots.</p>
  30.     </div>
  31.     <div id="sidebar">
  32.         <h2>About Me</h2>
  33.         <ul>
  34.         <li>-<a href="about.html">Why?</a></li>
  35.         <li>-<a href="about.html#Wants">What I want</a></li>
  36.         <li>-<a href="http://www.neverbecomplete.com/files/neverbecomplete.swf">Movie Intro</a></li>
  37.         <li>-<a href="photos.html">Photo's</a></li>
  38.         </ul>
  39.     </div>
  40. </div>
  41. </body>
  42. </html>



Thanks for taking the time to have a look - I appreciate it.
  • TheBecoming
  • Beginner
  • Beginner
  • TheBecoming
  • Posts: 52

Post 3+ Months Ago

I didn't read your code but some thing to remember is IE and Mozilla will inturpet the same code differently... Obviously.

One of the things you might want to find is a script that will detect the users browser type then change the code to that browser.
  • Cae
  • Expert
  • Expert
  • User avatar
  • Posts: 734

Post 3+ Months Ago

ive found (at least for me) that tables are your best friend when trying to get layouts working...

you might try sticking a table in there, with the menu in one '<tr><td>...' and the content part in a second one... that would force it below the menu...
  • cyner
  • Novice
  • Novice
  • cyner
  • Posts: 20
  • Loc: Stockholm, Sweden

Post 3+ Months Ago

In #title, is this really necessary?

Code: [ Select ]
position:absolute;
left:0px;
top:0px;
  1. position:absolute;
  2. left:0px;
  3. top:0px;


Won't "padding: 0px" do it? Then you can remove "position: absolute" and maybe you can design the entire page with relative positioning or floats. I find absolute positioning difficult across browsers, but I don't have much experience from web design.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 19 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.