Weird Problem in FireFox

Powderhound · #1 (**permalink**) Sep 19th, 2006, 08:06

Hey everyone

I have just made a new div for an image on a page on my website. it is having some problem aligning in the right spot in FireFox, (see here
http://www.freewebs.com/powderhound11/perisherblue.html) but in IE it's fine. I have tried fixing this problem but if it works in FireFox it will then not work in IE properly. Any help would be greatly appreciated.

Thanks

Ryan Fait · #2 (**permalink**) Sep 19th, 2006, 09:08

float: center;

"center" is not a valid property. Only "left" and "right" are valid choices. To center something on the page, you need to use margin: 0 auto; While that won't work in IE, you can use position to acheive the effect as well.

ukgeoff · #3 (**permalink**) Sep 19th, 2006, 09:32

Just as a general tip Powderhound, because IE is the less compliant of the browsers in common use, always aim to get your pages working in Firefox, Opera, Safari or whatever first and then tweak to allow for IE's inconsistencies.

Also, try and find ways of doing things that don't require loads of 'hacks' for different browsers.

Powderhound · #4 (**permalink**) Sep 19th, 2006, 10:21

Thanks for the tip ukgeoff.
i changed my code a bit and it looks fine on my local computer, but when its on the net it's doing the same thing?

I should have posted the code related to whats happening so here it is
the css

Code: Select all

 
/* Div's*/

#imageDiv     {width: 200px;
            height: 200px;
            float: right;
}

#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;
}

and the 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" content="text/html"/>
    <meta name="description" content="Australian Ski Resorts" />
<title>Ski Australia - Perisher Blue</title>
</head>

<body>
    <div id="title"><h1>Ski Australia</h1>
    </div>
        <div id="container">
            <div id="header">
                <img src="http://i64.photobucket.com/albums/h166/Powderhound11/Web%20Site%20Images/snowmakers-1.jpg"  align="middle"/>
            </div>
            <div id="sidebar">
                <a class="menu" href="http://www.freewebs.com/powderhound11">Home</a>
                <a class="menu" href="http://www.freewebs.com/powderhound11/Ski%20Resorts%20Page.html">Ski Resorts</a>
                <a class="menu" href="http://www.freewebs.com/powderhound11/Under%20Construction.html">Photo Gallery</a>
                <a class="menu" href="http://www.freewebs.com/powderhound11/Under%20Construction.html">Forum</a>
                <a class="menu" href="http://www.freewebs.com/powderhound11/Under%20Construction.html">Links</a>
                <a class="menu" href="http://www.freewebs.com/powderhound11/Contact%20page.html">Contact</a>
            </div>

            <div id="main">
                <h2>Perisher Blue</h2>
                    <div id="imageDiv">
                        <img src="http://wiki.ski.com.au/wiki/images/thumb/f/fa/Perisherblue.jpg/250px-Perisherblue.jpg" alt"Perisher Blue" />
                    </div>
                <p>Perisher has the most lifts and covers the largest area of the Australian resorts. It is an amalgamation of four separate ski areas. They are Perisher,
                Smiggin Holes, Blue Cow and Guthega. In most seasons these resorts are interconnected, and skiers and boarders can ski and board from one end to the other.
                There has been a slow and erratic modernisation of the rresort, but many of the 50 lifts are surface lifts, particulaly in Perisher, Smiggins and Guthega.
                Some of the infrastructure is showing its age, but there are plans (there are always plans) to upgrade over the next few years.</p>
                
                <h3>Location</h3>
                <p>Snowy Mountains in south east Australia, about 500 km from Sydney. <a href="http://www.freewebs.com/powderhound11/Location%20Map.html"onClick="window.open('http://www.freewebs.com/powderhound11/Location%20Map.html', '_new', 'scrollbars=1,resizable,width=780,height=540'); return false">Click here</a> to veiw a Location Map</p>
                
                
                
                <h3>Summary</h3>

ukgeoff · #5 (**permalink**) Sep 19th, 2006, 10:54

I'd much rather have a link to the live page. Is it as originall posted?

Powderhound · #6 (**permalink**) Sep 19th, 2006, 11:03

the code that i posted was not the original. i've also changed the website code to what i just posted. would you like to see the old code?

ukgeoff · #7 (**permalink**) Sep 19th, 2006, 12:24

No. Need to link to latest version.

Ryan Fait · #8 (**permalink**) Sep 19th, 2006, 12:29

Trust us, links are always better.

I'd suggest going a little easy on the inherit property as well. Relying on it that much will make your CSS more confusing.

Powderhound · #9 (**permalink**) Sep 19th, 2006, 21:37

http://www.freewebs.com/powderhound11/perisherblue.html . it's the same as the first link as all i did was update the websites css, with my changes

Quote:

I'd suggest going a little easy on the inherit property as well. Relying on it that much will make your CSS more confusing.

thanks for the tip, i try to if can

Ryan Fait · #10 (**permalink**) Sep 19th, 2006, 23:38

Does this work in IE? It works in Firefox and Safari:

Code: Select all

<h2>Perisher Blue</h2>
<img src="http://wiki.ski.com.au/wiki/images/thumb/f/fa/Perisherblue.jpg/250px-Perisherblue.jpg" alt"Perisher Blue" class="right" />
<p>Perisher has the most lifts and covers the largest area of the Australian resorts. It is an amalgamation of four separate ski

Notice the class="right" added to the image.

Then add this to your CSS:

Code: Select all

.right {
    padding: 0 0 0 10px;
    float: right;
}

Ryan Fait · #11 (**permalink**) Sep 19th, 2006, 23:42

Oh, and your site is turning out very nicely. I can't wait to see it when it's finished. The design is indescribably better than it was when you first posted it in the free website critique forum. You've made amazing progress.

Powderhound · #12 (**permalink**) Sep 20th, 2006, 07:10

Thanks.

I did what you sugested and it has fixed it (and it works in IE) but with one problem though, the text is know overlapping the image. I'll try fiddle around with it. go to the page i have uploaded the site with the changed code that you sugested

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
got a weird PS problem	shammy2007	Graphics and 3D	2	Dec 29th, 2007 02:27
[SOLVED] Weird Problem with Form in IE	Jack Franklin	PHP Forum	3	Dec 20th, 2007 15:58
Weird menu problem	Aardvarked	Web Page Design	5	Jun 28th, 2007 12:46
CSS weird block problem IE only - help!!!	stridenoble	Web Page Design	5	Jun 7th, 2007 16:37
Weird display problem in IE	Paul.Yeoman	Web Page Design	7	Jan 27th, 2006 14:42

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Weird Problem in FireFox