22 replies [Last post]
zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

I'm still fairly new at this CSS stuff, and I was playing with a page for a friend of mine. They're getting married soon and wanted to have a page up for information.

You can view the page here:
http://members.cox.net/teamfx/wedding/crsite.html

I would like to know why it falls apart in Firefox but renders well in IE...any suggestions? Thanks a million for the help.

Cheers!

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Why does IE work and Firefox falls apart?

Quote:
I would like to know why it falls apart in Firefox but renders well in IE

Because I would guess you have coded it for IE then tested in FF. It breaks cause you have coded it wrongly but IE lets that slide and makes it look as you want. Add the following things should put it right.

Centering is not done with text-align:center; but with margins, so use this instead

#wrapper {width: 760px; text-align:center; margin: 0 auto;}

Also you need to even out the margin and padding as IE and FF have differnet defaults

So I would add something like

*{margin: 0; padding: 0;}

The reason the footer looks silly is because you gave a height to the bracket div. In non IE things if you give a height, it will stay that height regardless of how much content. what you want to use is min-height. Alas IE ignores min-height so you can do this

#brackets {min-height: 241px;}
*html #brackets {height: 241px;}

But why not just get rid of the height all together?

Also you are specifying width all over the place for no reason. the width on the wrapper div should be enough.

Just incase I missed anything this looks the same in IE and FF.

/* cuerpo
----------------------- */
*{margin: 0; padding: 0;}
html, body {margin: 0; padding:0; background: #86765D url('http://members.cox.net/teamfx/wedding/bg-body.gif') repeat-x top left; 
text-align:center; color: #000; font: 12px/1.6em normal Tahoma, Helvetica Neue, Verdana, sans-serif}

/* cuerpo within
----------------------- */
#wrapper {width: 760px; text-align:center; margin: 0 auto;}
#topbar{height: 32px; background: #D5CCAF url('http://members.cox.net/teamfx/wedding/topbar.gif') no-repeat top center; padding: 0; margin: 0 auto}
#header { height: 241px; background: #D5CCAF url('http://members.cox.net/teamfx/wedding/header.jpg') no-repeat top center; text-indent:-2000px;}
#brackets {background: #86765D url('http://members.cox.net/teamfx/wedding/bg-bracket.gif') repeat-y;}
#shade {height: 40px; background: #D5CCAF url('http://members.cox.net/teamfx/wedding/shady.gif') repeat-x top center; margin: auto 23px}

/* escrito
----------------------- */
#texto {
	background: #D5CCAF url('http://members.cox.net/teamfx/wedding/rings.gif') no-repeat 480px 110px;
	margin: 0 23px; 
	padding:0 0 35px 0
}
p {text-align:justify; padding: 0 25px;}
p.limit {margin-right:240px;}
h1{font-size: 15px;}

/* el pie
----------------------- */
#footer {height: 70px; background: #D5CCAF url('http://members.cox.net/teamfx/wedding/footer.gif') no-repeat top center;}

You should also consider validating your code.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why does IE work and Firefox falls apart?

Remove the height from #brackets.

EDIT: Oops! Too slow.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

briski and Tyssen, thanks for the info, it's highly appreciated. I wasn't trying to code for IE as I kept viewing it in my XHTML editor under Gecko mode and it looked good until I loaded it to the site.

I've coded CSS before and have made some advances. But thank you for your help, maybe I was missing something or maybe it's been so long since I've coded.

Since we're on the subject, maybe you can take a look at my main site and let me know what you guys think. I'm sure there's a way that I can modify it or make it weigh less.

I have a site that hasn't launched yet, it's been sitting for about a year or so but I've played with it and messed around some.

You can view the english version here:
http://www.zerimarfx.com/home/

You can view the spanish version here:
http://www.zerimarfx.com/inicio/

The spanish version needs some work as well as the english side to this. I don't know why the logo isn't clickable in the english version like it is in the spanish one, and I know the spanish one has some flaws in IE but they seem to look well in Firefox.

Any input would be greatly appreciated. Thank you once again for your time and I look forward to hearing from you guys again.

Cheers!

zerimar3

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 20 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Why does IE work and Firefox falls apart?

english version
Home doesn't have hover effect when on homepage, whereas otheres have hover effect even when on that page?

Personally, I'd break up all those paragraphs a bit with headings to state what each paragraph is about - make it easy for people to scan to the bit they want.

You are missing h2 and h3 you go straight from h1 to h4

If you disable images / hide background images, you cant see the navigation at all

Nicely presented site!

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

Thanks for the input fatfreddy. I'm going to take a look at those sites sometime this weekend and tweak them a little. I think you're right about breaking up the paragraphs a bit, so I'll see about doing that. Thanks for your time, it's greatly appreciated.

Cheers!

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

briski:
I took tex-align: center out of the wrapper and the body and it renders well in Firefox as well as IE.

So basically the text-align: center was only to center my text through the whole page?

It had nothing to do with centering the wrapper?

I also removed the "height" out of the brackets altogether, as I was reading your post that's one thought that came to mind and you covered it, so I thank you. I'm also assuming where you added the asterisk marks (*) were so that it would only show up in IE correct?

I just want to make sure I understand what's going on here.

One last thing, I have a (p) and a (p.limit) but when I write it out, it doesn't give me a break in the paragraphs, and clue as to why it's not giving me the break?

Thank you once again for your time.

Cheers!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why does IE work and Firefox falls apart?

zerimar3 wrote:
So basically the text-align: center was only to center my text through the whole page?
It had nothing to do with centering the wrapper?

Text-align: center on the body or wrapper is only required to centre a layout in IE5. For all other browsers, you use margin: 0 auto.
Not sure what you mean about p and p.limit.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

Tyssen,

I have a p and p.limit so that I can bring in the margin on one paragraph further than the other paragraphs so as to show a picture.

However, when I use this, it doesn't give me a break in the paragraphs. You can see what I mean here at the page:
http://members.cox.net/teamfx/wedding/crsite.html

All of the paragraphs stick together and don't offer breaks in between, and I don't want to use <br /> to get the breaks, as they should have breaks by <p> and </p> right?

Just a concern I'm working on right now. I'd appreciate any input.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 20 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Why does IE work and Firefox falls apart?

just add
margin-bottom:10px;

to p
and p.limit [edit] don't need to add to this class just p [/edit]

breaks them up just fine

Also note that when you resize the text it breaks that effect anyway

webecho

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Why does IE work and Firefox falls apart?

You don't have any top or bottom margin or padding on your p tags. You zeroed everything out by using *{margin: 0; padding: 0;}

You have the p tag with 0 25px which is giving it 25px left and right
You need to give p either some top and/or bottom margin or top and/or bottom padding

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

fatfreddy, thank a million for the tip. Although it works, shouldn't the paragraphs have had the breaks just by using <p> on there?

Just wondering because it's worked that way other times.

Thanks again.

Cheers!

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

rmfred, I didn't get notified of your post until after I replied, although your reply was before mine. I see what you're saying, yet I'm still wondering as to why the <p> tag didn't just break up the paragraphs. I just assumed they did.

Now had I not put padding on there, would they have broken up? Which means I wouldn't have zeroed everything else out.

Thanks for your help, this is really helping me understand alot.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 14 years 20 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Why does IE work and Firefox falls apart?

It would normally
but you set all margins and padding to 0 by using
* {margin:0; padding:0;}

just to clarify
* is a wildcard so applies to every element (it's not just for IE)

It is a good idea to have this at the start of every CSS file as it negates any browser defaults and lets you choose margins / padding for every element

freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

fatfreddy,

You said,

Quote:
Just to clarify
* is a wildcard so applies to every element (it's not just for IE)

It is a good idea to have this at the start of every CSS file as it negates any browser defaults and lets you choose margins / padding for every element

That was a suggestion by briski which I added and asked if it was something that only shows up on IE or is it *html that only shows up on IE and hides from Firefox.

Baically I'm asking: Can you break it down a little more? What do you mean by saying, "It is a good idea to have this at the start of every CSS"?

Thanks for your time, I'm really just soaking all of this in.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why does IE work and Firefox falls apart?

I start off every stylesheet with * { margin: 0; padding: 0; } which sets the margin and padding for every element to 0. Then you can set it back to what you want on a case by case basis.

* html .... is the IE-only Holly hack (which won't work in IE7).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

Tyssen, thanks for the reply. I took a look at fatfreddy's site and checked out the code and noticed he starts his code out with * at the beginning of the style sheet.

So then basically you just start of with * { margin: 0; padding: 0; } and change up the padding and margin on the other elements?

I just want to be sure I understand this in the right way. Does adding the * just keep the structure from bugging out in other browsers or what purpose does it serve?

Thank you all once again for taking the time to share your knowledge. I really need to get this stuff down because I want to understand this well. I used to do some coding, mainly with tables and CSS but now with divs it seems...I don't want to say harder...but a bit more challenging.

Thanks again!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Why does IE work and Firefox falls apart?

zerimar3 wrote:

So then basically you just start of with * { margin: 0; padding: 0; } and change up the padding and margin on the other elements?

I just want to be sure I understand this in the right way. Does adding the * just keep the structure from bugging out in other browsers or what purpose does it serve?

It means that every element will display with no margins and no padding, unless you add a rule to your stylesheet for that element.

I'm using this, but I haven't decided if it's really a good idea yet.

:?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why does IE work and Firefox falls apart?

The * is called the 'universal' selector because it targets all/every element.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

thanks Ed Seedhouse & Tyssen, it looks like I'll need to research this a bit more and get more information on how all of this works. The help is appreciated.

Cheers!

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

Hey guys I'm back,

Check this out. I got the page pretty much together that I was working on, thanks to the help of many of you.

However, I do have one other question, before I finish this off. I have a background image that looks well in FF and IE, but in Safari, the image moves around, and doesn't look well.

I'd appreciate it if you took some time to look at the site here:
http://www.celiandrobbie.com/

If you see it in Safari, the background image moves up under the text, but I want it completely visible as it is in FF and IE. Camino also renders it correctly.

Thanks for your time, I look forward to your responses.

Cheers!

zerimar3
Offline
Regular
Last seen: 13 years 6 weeks ago
Joined: 2004-04-23
Posts: 19
Points: 0

Why does IE work and Firefox falls apart?

Any takers on the above post? Crying

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Firefox/ Opera Problems

paulh wrote:
The page is at phowell.co.uk/templates/menu1/menu1.html, I would greatly appreciate any help and comments.

You need to start your own thread - don't hijack other people's.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference