Question aboput fire fox

Forum Moderators: not2easy

Message Too Old, No Replies

Question aboput fire fox

Putting together a web site using css

frontend designer

3:40 pm on May 16, 2005 (gmt 0)

I am in the preocess of putting together a web site made up of CSS three coloums LHS menu, ceter for content and RHS for extra advert space.

My queston is how do I get this site to work in Firefox and IE 5 and IE6

i ahve done a couple of test pages but for some reason the css that i put together will either work in one browser and not the other should I set up different CSS pages for each browser so one CSS set up for only Fire fox and one for IE?

if so how do I go about doing this making the browser read which browser it is curently using? any help any one can offer regarding this thread will greatly be appreachiated.

many thanks

collymellon

3:57 pm on May 16, 2005 (gmt 0)

this is a problem im experiencing. It's a case of fiddling with your css to make it cross-browser efficent.

Many say the best way is to create the site using FF as primary test browser then adjust CSS so all is well in I.E etc..

I have done it the other way round (tested on I.E from start) and am now trying adjust the style sheet which is proving to be a nightmare :(

benihana

4:07 pm on May 16, 2005 (gmt 0)

1) use a full and complete doctype, so your working in standards mode.

2) Try not to use padding on the left and right of elements, as IE5's broken box model doesnt deal with them very well.

3) Validate html +CSS

4) ask specific questions here...

frontend designer

8:29 am on May 17, 2005 (gmt 0)

collymellon I know exactly what you mean LOL I have built it in ie6 and now I am suffering big time so many problems I am getting a bit dis heartened

I guess I will be asking many many questions on here in the very near future

zackattack

8:50 am on May 17, 2005 (gmt 0)

Hi - my pennysworth

I build with I.E. and FF, and yes use FF to guage how CSS should work in a compliant browser. I can get good results in both, it does take a little longer at first but you do speed up eventually

There is allot of fiddling, but I have found it INCREDIBLY helpful to build and whilst buildiing keep checking results in FF AND I.E. at the same time - there is no better way to learn about all the little discrepencies.

And Yes WebmasterWorld is brilliant, so very many helpful people...

frontend designer

9:30 am on May 17, 2005 (gmt 0)

Hey thanks zackattack for the vote of confidance there, I have a question that you could maybe shed some light on maybe that is If I have used padding-right
padding- left
etc how is the best way to do that spacing with out using Padding any ideas?
thanks
Stu

benihana

9:37 am on May 17, 2005 (gmt 0)

i tend to avoid left and right padding on fixed width elements. If possible use margins on the elements children.

e.g. if you have a div with id of container which holds some paragraphs, instead of:

#container {
padding-left:12px;
padding-right:4px;
width:200px;
}

use:

#container {
width:200px;
}

#container p{
margin-left:12px;
margin-right:4px;
}

frontend designer

9:43 am on May 17, 2005 (gmt 0)

Thanks benihana, I will give that a go and see how i go att his rate I will be racking up this thread LOL I always say the best way to learn is on ajob lol but when i have a seven foot manager breathing down my neck I am feeling a tad out of my deapth LOL

creativexperience

9:17 pm on May 28, 2005 (gmt 0)

Which doctype are you using?

All my layouts work in IE5+ & FF. I use: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and with this i use the!important rule for FF, so that the layout renders the same. As we are not allowed to place links here give creative-xperience in a search engine and go to the com site, click on references and then you can check the css out.

Here an example of the important rule:

#container{
position:relative;
text-align:left;
margin:0 auto 0;
width:974px!important; /* for FF */
width:988px;
padding-top:182px;
padding-left:12px;
}

#icons{
position:absolute;
top:119px;
left:0;
width:191px!important;
width:216px;
height:30px!important;
height:32px;
padding-top:2px;
padding-left:25px;
}