Back To Website Design Forum

Trouble w/ Mozilla

  • NeverBC
  • Born
  • Born
  • No Avatar
  • Joined: Aug 28, 2004
  • Posts: 1
  • Status: Offline

Post August 28th, 2004, 10:08 am

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



Thanks for taking the time to have a look - I appreciate it.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 28th, 2004, 10:08 am

  • TheBecoming
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Aug 12, 2004
  • Posts: 52
  • Status: Offline

Post August 28th, 2004, 9:33 pm

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
  • Joined: Feb 25, 2004
  • Posts: 734
  • Status: Offline

Post August 28th, 2004, 10:30 pm

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
  • No Avatar
  • Joined: Aug 28, 2004
  • Posts: 20
  • Loc: Stockholm, Sweden
  • Status: Offline

Post August 29th, 2004, 3:05 am

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.

Page 1 of 1

Post Information

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

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.