...

View Full Version : Image FireFox Issue



hyp3rk1d
01-09-2008, 02:10 PM
--------------------------------------------------------------------------------

I still can't figure this issue out.. Everything works fine in IE, but not in firefox.

Part of my CSS file looks like this:

body
{
background: #006666;
margin-left = .5cm;
margin-right = .5cm;
margin-top = .5cm;
margin-bottom = .5cm;
}

#leftside
{
background-image = url("/styles/marble.gif");
height: 100%;
width: 100%;
}

HTML:

<html>
<head>

<title>TITLE<title>
<link rel=stylesheet type="text/css" href="/styles/style.css">

</head>

<body>

<div id="leftside">
<table border="1" width="100%" >
CONTENT
</table>
</div>
</body>
</html>

It will display the image in IE, but not in firefox.. Also another thing I noticed, is that when I take the image out and just put in a color aka background: #EEEEEE. It will fill the background color of the table, but when I do the image, as you can see above, it will not work!!!! Someone please help. I have tried everything/looked everywhere.

srule_
01-09-2008, 02:15 PM
1. Makse sure the url to the image is correct
2. Try adding the other properties so firefox knows what to do:

ex:


background: #SOMECOLOR url("/styles/marble.gif") no-repeat top left;


3. Don't use tables for you layouts! it's is very bad coding practice.

hyp3rk1d
01-09-2008, 02:24 PM
Got it.. Thank you!!!

Arbitrator
01-09-2008, 03:08 PM
Part of my CSS file looks like this:

body
{
background: #006666;
margin-left = .5cm;
margin-right = .5cm;
margin-top = .5cm;
margin-bottom = .5cm;
}

#leftside
{
background-image = url("/styles/marble.gif");
height: 100%;
width: 100%;
}That syntax is wrong, wrong, wrong! It should be like the following:


body
{
background: #006666;
margin-left: .5cm;
margin-right: .5cm;
margin-top: .5cm;
margin-bottom: .5cm;
}

#leftside
{
background-image: url("/styles/marble.gif");
height: 100%;
width: 100%;
}

Or, better yet, letís go for some efficiency by using shorthand and removing stuff thatís not doing anything:


body { margin: 0.5cm; background: #066; }
#leftside { width: 100%; background: url("/styles/marble.gif"); }

Tangential Information
You forgot the document type declaration thatís supposed to go at the top of your document:


<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">

There are several other available declarations too, but this is the one that I recommend.

Lastly, it canít be repeated enough: ďDon't use tables for you layouts! it's is very bad coding practice.Ē (quote courtesy of srule_)

Apostropartheid
01-09-2008, 05:37 PM
There are several other available declarations too, but this is the one that I recommend.

I'm surprised at you, Arbitrator: I thought you'd be the first to link to our lovely sticky (http://www.codingforums.com/showthread.php?t=18346) on the subject! ;)

hyp3rk1d
01-09-2008, 06:29 PM
Thanks for the responses.. I am fairly new to all this.. Now I cant seem to extend that image all the way across the page.. When scrolls are added to the page in order to view more information to the right, if you scroll right you see the background color. The image does not extend in firefox, but it does in IE

_Aerospace_Eng_
01-09-2008, 06:32 PM
Got link? Got code? We can't see your code nor can we see your images.

hyp3rk1d
01-09-2008, 06:37 PM
body
{
background: #006666;
margin-left: .5cm;
margin-right: .5cm;
margin-top: .5cm;
margin-bottom: .5cm;
}

#leftside
{
background-image = url("/styles/marble.gif");
height: 100&#37;;
width: 100%;
}

HTML:

<html>
<head>

<title>TITLE<title>
<link rel=stylesheet type="text/css" href="/styles/style.css">

</head>

<body>

<div id="leftside">
<table border="1" width="100%" >
CONTENT
</table>
</div>
</body>
</html>

Excavator
01-09-2008, 07:17 PM
If you would quote your entire code it would better - use the CODE TAGS like I have.
And, like _Aerospace_Eng_ says, we still can't see your images so a link to a test site would be even better.

Try this:


body
{
background: #006666;
}

#leftside
{
background: url("/styles/marble.gif");
margin: 5cm;
height: 100&#37;;
}

HTML:

<html>
<head>

<title>TITLE<title>
<link rel=stylesheet type="text/css" href="/styles/style.css">

</head>

<body>

<div id="leftside">
CONTENT
</div>
</body>
</html>

hyp3rk1d
01-09-2008, 07:49 PM
mid-height works in order to get it to fill all the table..

why doesnt mid-width work???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum