PDA

View Full Version : Desiging for Firefox then IE? (CSS)



Powered
Jan 17th, 2007, 07:49 PM
I've been advised that the best method of designing a website which fits across all browsers is to firstly design the website for Firefox and then for IE.

To date I have designed the site for IE! which I am to a degree happy with but what ever I do I cant get the features to work in Firefox. For example I cant get bold text in Firefox or images to appear. Only the link for the image. Which coding does Firefox use which is different to IE?

Obolopo
Jan 17th, 2007, 07:56 PM
I've had a few problems like that too... Like here (http://obolopo.com/site/system/blogger/) I was coding a basic content management system for my blog... And the only image that will appear is my background! I don't know how to help you there...

But, some browsers only except "<strong></strong>" as an element to make your text bold.

VIPStephan
Jan 17th, 2007, 08:11 PM
Basically there's no difference in the HTML/CSS coding between Fx and IE. The only problem is that IE has a lot of bugs (i.e. it renders code differently than W3C standards advise and browsers are supposed to). That's why you should code for browsers that implement this code correctly (i.e. standards compliant browsers) and then fix the things that IE is doing wrong. Most of the times that's possible without hacking the code (exploiting those bugs) but sometimes you'll have to create a separate stylesheet for IE where you overwrite rules that you applied to standards compliant browsers before. You can make this separate stylesheet visible to IE only by putting the link to that stylesheet into a conditional comment (http://www.quirksmode.org/css/condcom.html) in your HTML.

I hope that makes sense?

Powered
Jan 17th, 2007, 08:12 PM
Ive tried this:

font: bold;
font-weight: bold;

and now it appears bold in both Firefox and IE, is this right?

Obolopo
Jan 17th, 2007, 08:16 PM
The code "font-weight: bold;" will make your text bold. Not "font: bold;". Also, VIPStephan is right... If you've never seen it before on the forums, I'll show you it now...

"Write it for Firefox, hack it for IE."

VIPStephan
Jan 17th, 2007, 08:18 PM
font is the shorthand for font-style, font-weight, font-size, and font-family and it will probably do nothing with only one value applied to it.
font-weight: bold; is and has been making the font bold in all browsers since the beginning of CSS. So if you can't get it working there is either some error in your HTML or your CSS.

You should also be aware of CSS specifity (Google is your friend).

Obolopo
Jan 17th, 2007, 08:22 PM
For future CSS questions you can visit W3Schools CSS2 Reference (http://w3schools.com/css/css_reference.asp). There you will find a list of properties, units of measurements, colors, and more.

Powered
Jan 17th, 2007, 08:23 PM
This is all very useful but the question is:

"Write it for Firefox, hack it for IE."

how?

What coding do I need to use for Firefox, for example images. And how do I hack it for IE?

Thanks so far.

VIPStephan
Jan 17th, 2007, 08:26 PM
Your question is too general to answer here. Please be more specific. What kind of image do you wanna place where? Post a link or your code here and explain the specific problem, and we can help.

Powered
Jan 17th, 2007, 08:32 PM
<div id="wrapper"
<div class="headercolumn1">
<a href="http://www.example.com"><img src="\logos7.bmp" width="564" height="65" alt="Example" border="0"/ ></a>
</div>


Cheers Stephen, this is the code for the header. This is fine in IE but the image wont appear in FF.

VIPStephan
Jan 17th, 2007, 08:38 PM
1) bmp graphics aren't supposed to be on websites. Use jpeg for photos/image with millions of colors and gif or png for graphics.
2) src="\logos7.bmp" - The slash is the wrong direction. it must be a forward slash: /logos7.jpg

Obolopo
Jan 17th, 2007, 08:43 PM
"Write it for Firefox, hack it for IE" mea
ns code it to be perfect in Firefox because Firefox goes by W3 standards and Internet Explorer does not (because Microsoft sucks).

Basically, get Firefox 2 (http://www.mozilla.com/en-US/firefox/), and then rewrite your code and make it look perfect in Firefox. After it is perfect in Firefox, you can use what's called "conditional comments". Conditional comments are comments you use to change the coding for your Web site depending upon if you are using Internet Explorer or not.

Here's an example of a page with conditional comments:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Write it for Firefox, Hack it For IE!</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--[if IE 7]>
<link rel="stylesheet" href="path/to/style_sheet.css" type="text/css" />
<![end if]-->
</head>
<body>
Write it for Firefox, hack it for IE.
</body>
</html>

In the example above, notice the conditional comment: <!--[if IE 7]>. There it means, if the visitor is using Internet Explorer 7, do this. And what it is doing is basically "if the user is using IE 7, link this style sheet".

But, conditional comments only work in IE, so if the user is using Firefox, it won't change the style sheet.

READ THIS ARTICLE! (http://www.quirksmode.org/css/condcom.html)

Powered
Jan 17th, 2007, 08:45 PM
I've transfered the image into a jog and changed the slashes. It still only appears in IE and not Firefox.

Once I can code the homepage the rest of the site will come easily.

VIPStephan
Jan 17th, 2007, 08:49 PM
Then please post the entire HTML and CSS (in between
tags). The error must be somwhere else.

Obolopo
Jan 17th, 2007, 08:50 PM
Yes, using .jpg as an extension can ruin an image. Jpeg images aren't meant to be high quality images. Most Web masters use .png files because it makes a high quality picture that takes up less space (unless making a transparent picture).

croatiankid
Jan 17th, 2007, 09:13 PM
PNGs are good for things like gradients. Gifs are good for simple, cartoon-like images with few colors (gifs only support up to 256). JPGs are good for photos. What I like about Fireworks JPGs is that I can edit the quality of the JPG and see live (before saving the file) what it will look like.

Obolopo
Jan 17th, 2007, 09:27 PM
PNGs are good for things like gradients. Gifs are good for simple, cartoon-like images with few colors (gifs only support up to 256). JPGs are good for photos. What I like about Fireworks JPGs is that I can edit the quality of the JPG and see live (before saving the file) what it will look like.

I prefer Fireworks .png's because of the quality and size, and that you can also open them on another computer with Fireworks and edit them as their original version like a PDF file in CS2. But yes, .jpg files are pretty good on Fireworks.

VIPStephan
Jan 17th, 2007, 09:37 PM
Fireworks PNGs are way too huge for website use (if you design graphics with layers etc.). They should still be exported before putting them on a website. Also if you use 24 or 32 bit PNGs they become quite large too and for gradients I still prefer JPEGs most of the times because a 30KB graphic (PNG) is still kinda big if you keep people wih dial-up connections in mind (which still exist widely).

croatiankid
Jan 17th, 2007, 09:43 PM
Okay I don't know how, but I have a 1x2000 gradient, PNG, and it's about 800 bytes. That's the wierdest thing I've noticed about saving PNG gradients in FW. Sometimes they're over 10 KB, sometimes under 1, but same quality.

Powered
Jan 18th, 2007, 07:10 PM
Thanks for the great help so far.

This is a link to a page hosting an example the problem I am having with images, the image appears in IE but not FireFox

www.worktips.co.uk

Could anyone please advise on why?

Excavator
Jan 18th, 2007, 07:14 PM
Hello powered,
Your using a class in your HTML
<body><div class="Header1">


But your styling an id in your CSS

#Header1
{
position: absolute;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 40%;
margin-left: 5px;
margin-right: 5px;
height: 80px;
}



You've also got your style and head tags out of order, your head is not closed...
All things the validator could have found for you. I like to use the validator While I'm developing a site, sort of like a spell checker, to find little typos just like this.

VIPStephan
Jan 18th, 2007, 07:16 PM
1) You are using back slashes but it should be forward slashes: /images/notonfirefix.png
2) You saved your image as notonfirefix.PNG (with file extension in capital letters) and so you should refer to the images with those capital letters: /images/notonfirefix.PNG

Oh and while we're at errors already:

You have two opening <head> tags one of wich is even before the doctype.
Your doctype says the document should use XHTML 3.0... we're not even at 2.0 yet.
You have no closing </head> tag
You have a '=' in the head section that serves no purpose.
You have no <body></body> tags and no closing </html> tag.

Nightfire
Jan 18th, 2007, 07:17 PM
Slashes for the image paths are the wrong way round. Should be /images/notonfirefix.png Not \images\notonfirefix.png

Powered
Jan 18th, 2007, 07:37 PM
Thanks, Im working on these now. Its odd that everything else is fine apart from images.

I shall update soon.

Cheers dudes.

Powered
Jan 18th, 2007, 07:43 PM
I've made a number of changes and still no joy lol

Obolopo
Jan 18th, 2007, 07:49 PM
Fireworks PNGs are way too huge for website use (if you design graphics with layers etc.). They should still be exported before putting them on a website. Also if you use 24 or 32 bit PNGs they become quite large too and for gradients I still prefer JPEGs most of the times because a 30KB graphic (PNG) is still kinda big if you keep people wih dial-up connections in mind (which still exist widely).

Is that so? That's strange because I just compared a solid black .png file compared to a .jpg and the size was not that much different. Like, 50-100 bytes or something. I wasn't aware they would be bigger files though. Thanks.

Powered
Jan 18th, 2007, 08:04 PM
Yes I got it to work, thanks everybody. Im so used to IE!!!! Its seems so much easier, for example the slashes can work in either direction and the images appear.

Thanks everyone.

VIPStephan
Jan 18th, 2007, 08:09 PM
That's the problem with IE because it's guessing how you could have meant and makes bad code look reasonably good and you wouldn't even know that you wrote bad code.


Is that so? That's strange because I just compared a solid black .png file compared to a .jpg and the size was not that much different. Like, 50-100 bytes or something. I wasn't aware they would be bigger files though. Thanks.

Yeah, of course there's not much difference with a small solid colored image. I guess even a solid black BMP wouldn't be that big. But if you have graphics with multiple layers and just save as Fireworks PNG it'll be bigger than if you would export it properly (export for web).

Excavator
Jan 18th, 2007, 08:12 PM
Powered, have a look at this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Images Not In Firefox?</title>
<style type="text/css">
html, body {
width: 100%;
text-align: center;
}
.header1 {
width: 40%;
height: 80px;
margin: 10px auto;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: thin solid #000000;
}
</style>
</head>
<body>
<div class="header1">
<a href="http://www.com/"><img src="Images_files/notonfirefox.png" alt="Power Over Wireless" width="474" height="73" /></a>
</div>
<div class="header1"><a href="http://www.com/"><img height="73" alt="Power Over Wireless" src="Images_files/notonfirefox(1).png" width="474" /></a>
</div>
</body>
</html>