CSS not looking good except in MS (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

CelticDragon -> CSS not looking good except in MS (11/8/2004 9:33:53)

I thought I had a nice looking site, I then downloaded firefox and netscape and it looks terrible!!!!

Navigation links are on top of each other and the top bar doesn't move.... the borders I had set up for the tables also look cr@p..... what did I do wrong?

edit: Apologies.... It's here



jaybee -> RE: CSS not looking good except in MS (11/8/2004 10:20:03)

First off try putting a doc type at the top to stop it dropping into quirks mode.

Second, let me see your style sheet.



CelticDragon -> RE: CSS not looking good except in MS (11/8/2004 10:22:20)

DOC type?

should be here



jaybee -> RE: CSS not looking good except in MS (11/8/2004 10:25:56)

Doc Type



jaybee -> RE: CSS not looking good except in MS (11/8/2004 10:30:00)

Then revalidate and go fix the errors in the HTML

HERE

Then if it's still all over the place, I'll take a look through your style sheet.



jaybee -> RE: CSS not looking good except in MS (11/8/2004 10:44:28)

On a quick scan of your css make sure you have a ; on the end of each statement.

You also have several spaces in your positions between the : and left right or whatever.

and the validator has a few problems too

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Falphamemories.com%2Fenglishand%2F&usermedium=all

Before you decide to end it all, it's not too bad. The Doc type will make things clearer.

And in IE it's a really nice site. Not too bad in the others although the menu is a bit squiify.



CelticDragon -> RE: CSS not looking good except in MS (11/8/2004 11:26:12)

Hey Jaybee...

Thanks for the info....

I put in <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> at the top of the homepage and revalidated.... did I put it in the wrong place?

EDIT: I have to go in and paste this onto every page I've done, don't I?



Giomanach -> RE: CSS not looking good except in MS (11/8/2004 12:00:04)

Try this one:

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

and it goes before the <html> tag[;)]



CelticDragon -> RE: CSS not looking good except in MS (11/8/2004 12:18:48)

wow.... got that in, validated it and it still has a few issues....

Only thing is the page doesn't look any better... navigation is a bit more spaced out but the header text has a huge padding area around it now....

Any ideas?



jaybee -> RE: CSS not looking good except in MS (11/8/2004 13:38:17)

Sorry for the delay something odd going on somewhere. For the last hour I've been getting 404 instead of this forum. My web site, half the people can see it the other half can't. Reports of a lot of DDos attacks going on too. [&:]

Your header looks identical in IE and FF to me, the only difference seems to be the menu.

You've got that as an include so I can't see the code.

You still have errors in the code

http://validator.w3.org/check?uri=http%3A%2F%2Falphamemories.com%2Fenglishand%2F



jaybee -> RE: CSS not looking good except in MS (11/8/2004 13:43:28)

Hold on, I take that back, I've just refreshed the cache and they're identical. Both IE & FF your menu is whacked.

Fix the errors listed in the link above then validate your css at

http://jigsaw.w3.org/css-validator/



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 4:14:15)

Hey Jaybee.... thanks for all this help...

I can't seem to understand this.... I thought width and height were standard attributes for defining rows and columns in html.... the validator is saying they are not..... what's going on here?

I've changed them to px values instead of % and it's still not working....

Took out all the border-right-widths and the w3c validator says it's still there.....

EDIT: Ok, just figured out the CSS seems to be without problem! It's the HTML code where the border-right-widths needs to be changed.... menue still looks terrible! The header in MS seems to be out of whack....



jaybee -> RE: CSS not looking good except in MS (11/9/2004 4:39:18)

OK, I know it's a b******

http://www.w3schools.com/tags/tag_img.asp

The "align", "border", "hspace", and "vspace" attributes of the image element were deprecated in HTML 4.01.

If you go look at that page you'll see all the attributes for image. It suggests you use css to position and set the borders.



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 7:45:34)

so should I have a different
td.title
for every table I want and have the size, borders and the like declared there and simply delete everything in the code except:
<td class="class1"> and be done with it?

It really begs the question, if I'm doing this much in the code, why would i keep using FrontPage? It may sound like a childish question but would I be using it just for html and preview? If I change things and then go into normal mode it seems to put back in the stuff for the <td stuff>.... Should i start looking at dreamweaver?



Giomanach -> RE: CSS not looking good except in MS (11/9/2004 7:49:28)

Hi Stephen

When defining borders etc in CSS all you need to do is apply the style as you do, and nothing else is needed[;)]

And as for this...

quote:

It really begs the question, if I'm doing this much in the code, why would i keep using FrontPage? It may sound like a childish question but would I be using it just for html and preview? If I change things and then go into normal mode it seems to put back in the stuff for the <td stuff>.... Should i start looking at dreamweaver?

I always say the same thing...use what's best for you, use what you know, there's no harm in looking at DW, but remember, you won't have the FP publish feature, all of it will be uploaded via FTP



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 7:55:47)

any idea whats happening with my navigation buttons?

i uploaded another site I've been messing with too and the buttons don't seem to have the uniform height there either..... that's here

EDIT: Also, when I look at the original site this one... in IE there is this white space beneath the header table row.... breaks up the line of the design... also the title appears in this white bit a little but in FF / NS the image looks great but the text is up higher..... this is getting really confusing and frustrating!



Giomanach -> RE: CSS not looking good except in MS (11/9/2004 8:02:10)

Try applying the style to the <td> tag instead, and alter the CSS to: 

.button a:link{
border:3px double #FFFFFF; width: 130px;
text-decoration: none;
background-color: #9999CC;
color: #FFFFFF;
font-size:12px;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
padding: 6px;
margin-left: 2px
}

.button  a:visited{
border:3px double #FFFFFF; width: 130px;
text-decoration: none;
background-color: #9999CC;
color: #FFFFFF;
font-size:12px;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
padding: 6px;
margin-left: 2px
}

.button a:hover{
border:3px double #FFFFFF; width: 130px;
text-decoration: none;
background-color: #000099;
color: #FFFFFF;
font-size:12px;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
padding: 6px;
margin-left: 2px
}



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 8:07:10)

Not looking at that one yet.... Was more interested inthe first one...

I have the cell as navback which has the image in the background, how would I get around that one and still have the background?

EDIT: S'Ok.... I just realised I can have a .button declaration and a .button a.link whatever declaration too! yay!



Giomanach -> RE: CSS not looking good except in MS (11/9/2004 8:11:22)

display: block;

[;)]

a:link.button{
display: block;
...your coding....
}

And the same for visited and hover[;)]

And don't forget to set a width with that one....



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 8:13:48)

block? That's a new one on me.... what's it do?



Giomanach -> RE: CSS not looking good except in MS (11/9/2004 8:16:40)

display: inline; will put all on a horizontal axis
display: block; will put all on a vertical axis..

So when you have:

<td class="nav">
<a href="#">Item 1</a> <a href="#">Item 2</a>
</td>

and:

.nav a{
display: block;
}

the links will appear in a vertical list[;)]

Example: http://server5.crucialdns.com/~giocss/



jaybee -> RE: CSS not looking good except in MS (11/9/2004 8:21:22)

quote:

I be using it just for html and preview


that's all I use it for.

- block
http://www.w3schools.com/css/pr_class_display.asp

suggest you bookmark www.w3schools.org



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 8:22:52)

that block bit put more white space between my cells....

I took it out and the background looks ok now, but the links still sit on top of each other....

I don't get it, I have a <br> between each one, I though that should make them appear one under the other



Giomanach -> RE: CSS not looking good except in MS (11/9/2004 8:25:07)

When using display: block; there is no need for line breaks[;)]



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 8:31:26)

EDIT: I put it into the link code itself and it worked but there's a huge space between each link now.... can I tighten that up a bit?



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 8:46:44)

do you use the includes or do you hand put all the internal links on every page? As you might imagine by the time I'm finished with the site there will be an absolute abundance of internal links on the site....


EDIT: Another thing I just noticed.... on the page that I have included a doctype the text in the header doesn't show up right but shows up perfectly in the other pages with no doctype.... there are other slight positioning changes in the pages without a doctype too.... Why do you think this is?

Also, in FF / NS the visited link doesn't seem to be working by changing the colour of the button...



c1sissy -> RE: CSS not looking good except in MS (11/9/2004 9:25:54)

quote:

do you use the includes or do you hand put all the internal links on every page?


You could use includes. This way if you have to change something, you only have to change one file, instead of hundreds.

I think two great time savors for web design are includes and css. Makes changing things so much easier.



jaybee -> RE: CSS not looking good except in MS (11/9/2004 11:50:46)

a:link.button {
width: 118px;
height: 28px;
text-decoration: none;
background-image: url('images/button1.gif');
background-repeat: no-repeat;
color: #FFFFFF;
font-size:12px;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: left;
vertical-align:middle;
padding: 6px;
margin-left: 2px;

reduce the padding.
If it all shoots left then increase your left margin



jaybee -> RE: CSS not looking good except in MS (11/9/2004 11:55:17)

quote:

Why do you think this is?


The doctype specifies how the page should be rendered. As soon as you put it in your other pages, they'll all change too.



CelticDragon -> RE: CSS not looking good except in MS (11/9/2004 12:46:55)

But it looks better in the browsers without the doctype....



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.15625