FF & IE differences

@Css_CalavMar 07.2005

hi guys,

i have ~~[I]~~nearly[/I] got my sight looking the same in IE and FF (finally)..

these are the problems i still have and cant sort out.

if anyone could help me id be very gratefull

the style sheets are

all of site: ~~[url]~~http://www.deskjetmodels.co.nz/css/model.css[/url]
shopping cart: ~~[url]~~http://www.deskjetmodels.co.nz/css/cart.css[/url]

1- if you look here ~~[url]~~http://www.deskjetmodels.co.nz/index.php[/url] in FF, this is how i want it. if you look at it in IE there are little gaps at the top of the input search box and the button is out.

2- all the buttons i have look how i want them in FF. now in IE however there are little differences like the alignment of the words inside the buttons, and hieghts etc

the buttons are on pages –

~~[url]~~http://www.deskjetmodels.co.nz/cart.php[/url] (cart.css)
~~[url]~~http://www.deskjetmodels.co.nz/details.php[/url] (model.css)

3- if you look at ~~[url]~~http://www.deskjetmodels.co.nz/contact.php[/url] then ~~[url]~~http://www.deskjetmodels.co.nz/index.php[/url] you will notice the page moves a little.

thank you so much for anyones time, i cannot figure these out and am at a dead end! cant wait to get this finished and start on something else with all i have learned.

to post a comment

CSS

15 Comments(s) _↴

@FangMar 07.2005 — #1.

input.button {
 bla...
 float:right;
 /*margin-left: 15em;*/
 }

2. Probable cause: http://www.quirksmode.org/css/tests/mozie_button.html

3. The 'twitching' does not occur off-line. The scrollbar only appears in contact.php, try adding [I]overflow:-moz-scrollbars-vertical;[/I] to body.

@Css_CalavauthorMar 07.2005 — #hey Fang thanks for your help i will do the changes when i get home and let you know!

@Css_CalavauthorMar 08.2005 — #hi fang (or anyone else)

1. im not sure what this is ment to do?

[CODE]
 input.button {
 bla...
 float:right;
 /*margin-left: 15em;*/}
 [/CODE]

2. this page says it only works in FF, but i am having problems with IE.

3. Solved!

bassically if you look at the center navigation bar (at the input box and button) its very out in IE, im stumped as to why!?

thanx anyone for there help!

@FangMar 08.2005 — #

1. Take out the margin and add the [I]float:right;[/I]. This will move the button to the right-side of the table.

2. The solution given, in QuirksMode, only works in Mozilla. There is no general solution for IE.

Here is a solution for you (Opera is still not quite right)

/* -- start Search -- */
 input {vertical-align: middle;} /* Opera */
 input.search_box{
 height: 14px;
 margin:0 1em 0 0 !important; /* Mozilla */
 margin:-1px 1em -1px 0; /* IE Opera*/
 }
 
 input.search_btn {
 background-color: #e6e6e6;
 border: 1px solid #999999;
 color:#333333;
 margin:0 4em 0 0 !important;  /* Mozilla */
 margin:-1px 4em 0 0; /* IE Opera*/
 }
 
 form{
 font: 12px/11px Verdana, sans-serif;
 margin: 0;
 }
 /* --end Search-- */

@Css_CalavauthorMar 08.2005 — #thanx Fang, i will try get those changes done today and let you know.

also, i have two more questions..

inside any button, for example:

[CODE]
 input.search_btn {
 background-color: #e6e6e6;
 border: 1px solid #999999;
 color:#333333;
 margin:0 4em 0 0 !important;  /* Mozilla */
 margin:-1px 4em 0 0; /* IE Opera*/
 }
 [/CODE]

whick properties is it to get the text inside the button aligned? it is also different in IE and FF.

and.. select boxes, on this page www.deskjetmodels.co.nz/index.php the select box has a border of some sort but the text boxes dont. can i have my select box the same style as my input boxes? i have given it the same properties but does not seem to be right.

[CODE]
 select{
 font: 11px/14px Verdana, sans-serif;
 width: 13.5em;
 background-color: #FBFBFB;
 border: 1px solid #999999;
 }
 [/CODE]

thanx very much!

@FangMar 08.2005 — #Some more tweaking for IE and FF:

/* -- start Search -- */
 input {vertical-align: middle;} /* Opera */
 input.search_box{
 height: 14px;
 margin:0 1em 0 0 !important; /* Mozilla */
 margin:-1px 1em -1px 0; /* IE Opera*/
 padding-top:0 !important; padding-top:2px;
 }
 
 input.search_btn {
 background-color: #e6e6e6;
 border: 1px solid #999999;
 color:#333333;
 margin:-0 4em 0 0 !important;  /* Mozilla */
 margin:-3px 4em 0 0; /* IE Opera*/
 padding-top:0 !important; padding-top:2px;
 }
 
 form{
 font: 12px/11px Verdana, sans-serif;
 margin: 0;
 }
 /* --end Search-- */

As for the select; it's the background-color that causes the problem!

Take it out of the select and put it in option.

select{
 font: 11px/14px Verdana, sans-serif;
 width: 13.5em;
 border: 1px solid #999999;
 }
 option {
 background-color: #FBFBFB;
 }

The color is nearly white so doesn't realy show.

@Css_CalavauthorMar 09.2005 — #hi fang,

about the select box -

can you see that the select box is indented? is there a way to not have it styled like that and have it styled like the text boxes?

about the search part -

i changed the code to what you gave me and now it gave me a little gap at the bottom of the button in FF and way out in IE :S

thanx

@FangMar 09.2005 — #See the enclosed css which displays correctly for me.

The select is not possible; either blue border and no indent or indented grey border.

In IE it will always be blue.

@Css_CalavauthorMar 09.2005 — #thanx fang your css fix was just what i needed.

in regards to the select box, what is the style for blue with no boarder?>

thanx alot!

oh and one thing i just noticed, not sure whats going on here, if you look at my css, and yours on this page.

http://www.deskjetmodels.co.nz/details.php

on your css, its all colasped. can you see what i mean?

i have left my original css up so you can see

http://www.deskjetmodels.co.nz/css/model.css

thanx fang

@FangMar 09.2005 — #As for the select; it's the background-color that causes the indentation, just remove it to revert to the normal blue border.

What is 'collapsed'?

@Css_CalavauthorMar 09.2005 — #thanx for the info about the select box fang.

if you look at your css you ziped up, then look at www.deskjetmodels.co.nz/details.php there is no 'padding' or space between the headings or the text boxes.

if you look at that page now with my css up, you can see how there is space between them all.

just wondering how/why this is different in your css and my css.

i hope i exaplined myself ok.

this is the last thing i need to fix!

thanx fang

@Css_CalavauthorMar 10.2005 — #hi,

i have uploaded both css and html files.

fangs new css file:

http://www.deskjetmodels.co.nz/details.php

---

my old css file:

http://www.deskjetmodels.co.nz/details_old.php

if you look at both pages you can see the difference in how the content is displayed.

i want the content to be displayed like the 2nd link but i cant see why it is different??

thanx guys!

PS fang:

i took the background colour line out of the select and still indented, have i done this correct?

select{

font: 11px/14px Verdana, sans-serif;

width: 13.5em;

border: 1px solid #999999;

}

select.detailspage{

font: 10px/14px Verdana, sans-serif;

width: 14.55em;

}

@FangMar 10.2005 — #The content layout change is due to element selectors (form and input).

There are 2 forms on the page; the necessary changes to the menu(form) are affecting the 'Delivery Details' form. Use id selectors to change the 2nd form.

? The unindented select of details.php was the intention?

@Css_CalavauthorMar 10.2005 — #thanx fang,

i kinda see whats going on now. in order to fix the menu, you had to make some changes to the form element. and in turn, changed the details page.

is that correct?

ok, so i know how to do 'Use id selectors to change the 2nd form' this bit of it, but i looked at the two css files and they have the same properties for the form style.

can you help me with this fang please?

about the select box, i want it to look similar to the text boxes, plan, no indent etc.

thanx fang

UPDATE:

i have fixed the problem by adding in "margin's" in where needed for example

input.detailspage{

width: 14em;

height: 13.5px;

background-color: #FBFBFB;

border: 1px solid #999999;

margin-top: 2.5px;

}

not sure if this is the proper way about doing things but will work for now.

what do you think fang?

@FangMar 11.2005 — #Give the form in question an id, then you don't have to give all the inputs a class.

#deliverydetails input{
 width: 14em;
 height: 13.5px;
 background-color: #FBFBFB;
 border: 1px solid #999999;
 margin-top: 2.5px;
 }

Also in #CSS _↴

Relative Image Positioning odd and even rows in table with different backgrounds How to draw these borders

Success!

Help @Css_Calav spread the word by sharing this article on Twitter...

Tweet This

FF & IE differences

15 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

FF & IE differences

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴