...

View Full Version : CSS working fine in mozilla but not IE



wickland
12-27-2006, 10:24 PM
I am trying to redsign my sight and clean up the code with CSS and I am somewhat new to it altho I know the basics. My site is www.cableplease.com and it looks flawless on mozilla and looks hideous on IE and im very frustrated with it. Could someone tell me how to make my site look exactly the same on all browsers the way it looks on mozilla right now? I would prefer having a more advanced CSS writer rewrite the code the right way and post it up and i'll be able to look it over and implement it. I just want my site to appear on IE exactly the way it looks on mozilla right now.

Thank you.

whizard
12-27-2006, 10:46 PM
Not tryna sound harsh here, but the best way to make sure all browsers read your page the same way is to make sure it validates, and right now, you don't have a doctype or a chracter encoding, and your site breaks the validator. Those might be some good places to start..

Dan

EDIT: PS: Validator can be found here: http://validator.w3.org/

wickland
12-27-2006, 10:53 PM
I dont understand the validator very well. If I put up a validator, that will solve the problem? Which validator and version should I put on the site?

whizard
12-27-2006, 10:53 PM
Oh, and FTR, it looks essentially the same for me in FF2.0 and IE6

Dan

whizard
12-27-2006, 10:56 PM
This article http://alistapart.com/stories/doctype/

And of course this: http://codingforums.com/showthread.php?t=18346

should be helpful

if you have more questions, let me know

Dan

wickland
12-27-2006, 10:58 PM
Oh, and FTR, it looks essentially the same for me in FF2.0 and IE6

Dan

What does it look like on FF2.0, is there alot of blue spaces in between the pictures and margins? I have IE7 (which I think is horrible already) and it looks bad on there.

whizard
12-27-2006, 11:11 PM
Here is what it looks like in FF2

http://www.robowhizards.com/cableplz.bmp

Dan

wickland
12-27-2006, 11:14 PM
ok, that is the one that looks perfect. I've been reading the articles about the doc types and i'm still trying to figure out which type of html and version i'm using.

whizard
12-27-2006, 11:19 PM
For you, I would go with HTML 4.01 Strict.

EDIT: Here it is in IE6

http://www.robowhizards.com/cableplzie6.bmp

Dan

wickland
12-27-2006, 11:23 PM
I put in this doc type:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This made it look worse on mozilla and it still looks far more out of whack on IE. Wasnt the doc type supposed to make the pages look the same on all the browsers?

whizard
12-27-2006, 11:27 PM
Not instantly, but it is a first step. It is a waste of time trying to make pages look good across all browsers without a doctype.

Now try validating your site and fixing any errors that it gives you.

EDIT: Your page still looks OK to me in FF2....

Dan

wickland
12-27-2006, 11:55 PM
ok, I was actually able to validate the site, now I'm working on fixing the errors. These are some very strange errors such as:

Line 49 column 100: there is no attribute "BORDER"
Line 52 column 11: there is no attribute "ALIGN"

There has to be a border or align command in HTML isnt there? What else can you use? Am I supposed to use these in the CSS style sheet? I already changed one line:

<script type="text/javascript" language="javascript" src="zipformvalidate.js"></script>

to:

<script type="text/javascript" src="zipformvalidate.js"></script>

because the validator said that (language="javascript") was wrong, so i deleted it, does this make sense?

whizard
12-28-2006, 12:07 AM
Yes thats correct, there is no language attribute.

You can do the border and align through CSS

CSS Code:
{
border-width:--px
}

(where '--' = the number of px you want the width of your border to be)

Here is a handy reference for HTML 4.01 strict:http://www.december.com/html/4/

Dan

wickland
12-28-2006, 12:19 AM
Thank you for that link, I think I'm starting to get the hang of it a bit. Now I just have some CSS questions. I want that main picture (which is also a link) to have a border of 0. How can I do this in CSS?

Now when all the validation errors are fixed, should my site look exactly the same on mozilla as it would on IE with the doc type I'm using?

whizard
12-28-2006, 12:26 AM
For the borderless image:
CSS Code:


.image_without_borders
{
border:0px;
}


then, in that image tag:

HTML Code


<img name="image_without_borders" />

(Obviously you can change image_without_borders to something a little more meaningful.)


Now when all the validation errors are fixed, should my site look exactly the same on mozilla as it would on IE with the doc type I'm using?

Maybe, but don't get your hopes up. The point is that now if any discrepancies arise, they can be addressed much more effieciently.

Dan

wickland
12-28-2006, 04:20 AM
how do i underline words within a paragraph? the <u> isn't allowed on this doc type.

whizard
12-28-2006, 04:25 AM
You could use <em>

with

CSS Code


em
{
text-decoration:underline;
}


(<em> stands for emphasis)

Dan

wickland
12-28-2006, 04:44 AM
On the firefox browser, do you know what could be causing that space between the bottom of the world cable association picture and the red line going accross the screen?

whizard
12-28-2006, 04:49 AM
I don't have a gap between the WCA (you mean the big white pic with the globe in the top left, right?) image and either red bar.

btw, if you don't want your underlined text to show up italic, you can add:

CSS Code:


font-style:none;

To the em declaration in your CSS

Dan

wickland
12-28-2006, 04:55 AM
I don't have a gap between the WCA (you mean the big white pic with the globe in the top left, right?) image and either red bar.

btw, if you don't want your underlined text to show up italic, you can add:

CSS Code:


font-style:none;

To the em declaration in your CSS

Dan

Thanks for the heads up. That is very odd, there is a big space on my firefox (version 1.5.0.9) and not on yours. This is why I'm extremly concerned about trying to get my site to look the same on every browser. I am still working on fixing the validation errors but is there anything else I could do to get my site to look universally the same on all browsers or is that just not possible no matter what you do?

I can't get the italic off with that attribute either in the CSS.

whizard
12-28-2006, 05:02 AM
You could try

CSS Code


a.image_wrapper
{
margin:0px;
}


HTML Code


<a href="http://www.cableplease.com/" class="image_wrapper"><img src="globe.gif" alt="World Cable Association"></a>


But idk if that will help

As far as cross-browser compatibility, you'll probably never get it perfect, there will be tiny incongruities across different browsers, but hey, thats life!

However, when you have a problem, play around with it, and if you can't get it to work, just ask for help, and someone will probably be willing and knowledgeable enough to help you out.

Dan

wickland
12-28-2006, 05:16 AM
I also couldn't get the itallic off of the em attribute in the CSS.

whizard
12-28-2006, 05:27 AM
I also couldn't get the itallic off of the em attribute in the CSS.


My bad! its

CSS Code


font-style:normal;


not

CSS Code


font-style:none;


Mental lapse there

Dan

wickland
12-28-2006, 05:46 AM
I just downloaded firefox version 2.0.0.1 and looked at my site and still see the space there. There are spaces like that all over IE7 and its frustrating the hell out of me. i set my margins to 0 on all sides yet IE still has some blue space above my nav bar at the very top. the only way of getting rid of that is setting the margin to a negative number! which doesn't seem right because I see other sites that look fine. There shouldnt even be blue space above the white nav bar, that is supposed to be the very top. This only appears in IE tho but not on my other site www.yankmydish.com , which is nearly exactly the same! There has to be a solution.

whizard
12-28-2006, 05:50 AM
That's insane! I don't have any gaps in FF2! I have no clue whats going on...

Are you on a Mac? I'm on a PC... not sure if that matters

Dan

wickland
12-28-2006, 06:21 AM
I am on a PC with windows xp. I tried clearing the catch because sometimes firefox likes to save the old materials but that didn't work either.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum