Firefox problem

Powderhound · #1 (**permalink**) Sep 6th, 2006, 08:54

Hey Guys

I'm trying to get a page up and running for my site, it works fine in IE, but for some reason when you view it in Firefox i get a problem. See for your self http://www.freewebs.com/powderhound1...ion%20Map.html

I'm not to sure if this is a css problem or a html problem, but i'm guessing html because i use the one css document for my whole website and all the other pages work fine

This is my html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <meta http-equiv="content-type" c/>
    <meta name="description" c />
<title>Ski Australia - Location Map</title>
</head>

<body>
    <div id="title"><h1>Location Map</h1>
    </div>
        <div id="container">
                <div id="main">
                    <h2>Location Map</h2>
                    
                    <p>Australian Resort Locations and Melbourne/Sydney Driving Map.</p>
                    
                    <span class="gen"><a name="top"></a>
                    </span>
                        <table class="forumline" cellspacing="1" cellpadding="3" border="0" align="center">
                            
                            <tr>
                            <td align="center">
                            <img src="http://wiki.ski.com.au/wiki/images/thumb/0/07/AustraliaDriveMap.gif/720px-AustraliaDriveMap.gif" border="0" />
                            </td>
                            </tr>
                            
                            <tr align="center">
                            <td class="catBottom" height="28"><span class="gensmall"><a href="javascript:window.close();" class="catmedbold">Close Window</a></span></td>
                            </tr>
                            
                        </table>
                        
                        <br>
                        <br>
                        <br>
                    
                    <p class="credits">  | Content by Austin Miller | Template by <a href="http://andreasviklund.com/">Andreas Viklund</a> |  </p>
                </div>
        </div>
</body>
</html>

and this is my css

Code: Select all

@charset "windows-1252";


body    {padding:0;
            margin:0;
            font:76% verdana,tahoma,sans-serif;
            background:#cccccc url(bodybg.gif) repeat;
            color:#303030;
}

a    {text-decoration:none;
        background-color:inherit;
        font-weight:bold;
        color:#008000;
}

a:hover    {background-color:inherit;
            color:#008000;
}

h1    {margin:0;
        font-size:3.6em;
        letter-spacing:-2px;
        text-align:right;
        background-color:inherit;
        color:#505050;
}

h2    {margin:5px 0 10px 0;
        font-size:1.6em;
        letter-spacing:-1px;
        font-weight:normal;
}

h3    {margin:5px 0 10px 0;
        font-size:1.2em;
        letter-spacing: -1px;
        font-weight: normal;
        color: #0E8004;
}


p    {margin:0 0 15px 0;
        line-height:1.3em;
}

img    {float:center;
        margin:0 10px 0px 0;
}
#header {
    margin: auto auto auto 10px;
}

#title    {margin:20px auto -9px auto;
            width:700px;
}

#container    {margin:0 auto 15px auto;
                width:700px;
                padding:10px;
                background:#ffffff;
                color:#303030;
                border:20px solid #505050;
}

#sidebar    {float:left;
                width:110px;
                padding-left:175px; 
}

#main    {width:385px;
            float:right;
}

#footer    {clear:both;
}

.menu    {display:block;
            width:110px;
            padding:4px 2px 4px 10px;
            font-size:1.1em;
            font-weight:bold;
            background-color:inherit;
            color:#008000;
            border:1px solid #ffffff;
}

.menu:hover    {background-color:#f8f8f8;
                color:#416b41;
                border:1px solid #dadada;
}

.credits    {margin-bottom:0;
                font-size:0.8em;
                background-color:inherit;
                color:#aaaaaa;
}

.credits a    {background-color:inherit;
                color:#aaaaaa;
}

any help would be greatly appreciated

minute44 · #2 (**permalink**) Sep 6th, 2006, 09:46

oooh err! what odd behaviour. Normally it'd be IE that would chuck a wobbler like that...

Umm, let me look more closely at your code and see what I can see.

spinal007 · #3 (**permalink**) Sep 6th, 2006, 10:15

ewww.....
I just spent a whole week trying to deal with IE bugs, I really didn't expect FF to do this.

I looked at your code in detail, examined it using the "Web Developer Toolbar" (FF extension) but I can't find the problem. Sorry mate...

Powderhound · #4 (**permalink**) Sep 6th, 2006, 10:34

It stumped me to. But thanks for trying

JacobHaug · #5 (**permalink**) Sep 6th, 2006, 11:53

Wow, I would expect IE to do this sort of thing. Not Firefox

moojoo · #6 (**permalink**) Sep 6th, 2006, 13:08

Chamnge #main to

#main {
width:695px;
overflow:auto;
}

and remove the float:center on img and the float right on main. You may need to resize the container or the image depending to make it fit exact.

Powderhound · #7 (**permalink**) Sep 6th, 2006, 21:46

It's worked for that page, but it has made my other pages go weird. So i'm going to make a different css file just for the Location map page.
Thanks for your help

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Linux Firefox div problem	web20	Web Page Design	2	Apr 17th, 2008 16:02
firefox problem	ahwell	Flash & Multimedia Forum	11	Apr 17th, 2008 11:44
Container Problem in FireFox	asengh	Web Page Design	8	Dec 12th, 2006 16:23
I'm having a problem with Firefox!	majorjc	Web Page Design	2	Jan 17th, 2006 15:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Firefox problem