hi guys,
i have nearly 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: <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/model.css">http://www.deskjetmodels.co.nz/css/model.css</a><!-- m -->
shopping cart: <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/cart.css">http://www.deskjetmodels.co.nz/css/cart.css</a><!-- m -->
1- if you look here <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/index.php">http://www.deskjetmodels.co.nz/index.php</a><!-- m --> 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 -
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/cart.php">http://www.deskjetmodels.co.nz/cart.php</a><!-- m --> (cart.css)
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">http://www.deskjetmodels.co.nz/details.php</a><!-- m --> (model.css)
3- if you look at <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/contact.php">http://www.deskjetmodels.co.nz/contact.php</a><!-- m --> then <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/index.php">http://www.deskjetmodels.co.nz/index.php</a><!-- m --> 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.1.input.button {
bla...
float:right;
/*margin-left: 15em;*/
}
2. Probable cause: <!-- m --><a class="postlink" href="http://www.quirksmode.org/css/tests/mozie_button.html">http://www.quirksmode.org/css/tests/mozie_button.html</a><!-- m -->
3. The 'twitching' does not occur off-line. The scrollbar only appears in contact.php, try adding overflow:-moz-scrollbars-vertical; to body.hey Fang thanks for your help i will do the changes when i get home and let you know!hi fang (or anyone else)
1. im not sure what this is ment to do?
input.button {
bla...
float:right;
/*margin-left: 15em;*/}
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!1. Take out the margin and add the float:right;. 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-- */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:
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*/
}
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 <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/index.php">www.deskjetmodels.co.nz/index.php</a><!-- w --> 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.
select{
font: 11px/14px Verdana, sans-serif;
width: 13.5em;
background-color: #FBFBFB;
border: 1px solid #999999;
}
thanx very much!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.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
thanxSee 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.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.
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">http://www.deskjetmodels.co.nz/details.php</a><!-- m -->
on your css, its all colasped. can you see what i mean?
i have left my original css up so you can see
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/model.css">http://www.deskjetmodels.co.nz/css/model.css</a><!-- m -->
thanx fangAs 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'?thanx for the info about the select box fang.
if you look at your css you ziped up, then look at <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">www.deskjetmodels.co.nz/details.php</a><!-- w --> 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 fanghi,
i have uploaded both css and html files.
fangs new css file:
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">http://www.deskjetmodels.co.nz/details.php</a><!-- m -->
---
my old css file:
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details_old.php">http://www.deskjetmodels.co.nz/details_old.php</a><!-- m -->
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;
}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?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?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;
}
i have nearly 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: <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/model.css">http://www.deskjetmodels.co.nz/css/model.css</a><!-- m -->
shopping cart: <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/cart.css">http://www.deskjetmodels.co.nz/css/cart.css</a><!-- m -->
1- if you look here <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/index.php">http://www.deskjetmodels.co.nz/index.php</a><!-- m --> 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 -
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/cart.php">http://www.deskjetmodels.co.nz/cart.php</a><!-- m --> (cart.css)
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">http://www.deskjetmodels.co.nz/details.php</a><!-- m --> (model.css)
3- if you look at <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/contact.php">http://www.deskjetmodels.co.nz/contact.php</a><!-- m --> then <!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/index.php">http://www.deskjetmodels.co.nz/index.php</a><!-- m --> 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.1.input.button {
bla...
float:right;
/*margin-left: 15em;*/
}
2. Probable cause: <!-- m --><a class="postlink" href="http://www.quirksmode.org/css/tests/mozie_button.html">http://www.quirksmode.org/css/tests/mozie_button.html</a><!-- m -->
3. The 'twitching' does not occur off-line. The scrollbar only appears in contact.php, try adding overflow:-moz-scrollbars-vertical; to body.hey Fang thanks for your help i will do the changes when i get home and let you know!hi fang (or anyone else)
1. im not sure what this is ment to do?
input.button {
bla...
float:right;
/*margin-left: 15em;*/}
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!1. Take out the margin and add the float:right;. 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-- */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:
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*/
}
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 <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/index.php">www.deskjetmodels.co.nz/index.php</a><!-- w --> 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.
select{
font: 11px/14px Verdana, sans-serif;
width: 13.5em;
background-color: #FBFBFB;
border: 1px solid #999999;
}
thanx very much!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.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
thanxSee 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.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.
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">http://www.deskjetmodels.co.nz/details.php</a><!-- m -->
on your css, its all colasped. can you see what i mean?
i have left my original css up so you can see
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/css/model.css">http://www.deskjetmodels.co.nz/css/model.css</a><!-- m -->
thanx fangAs 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'?thanx for the info about the select box fang.
if you look at your css you ziped up, then look at <!-- w --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">www.deskjetmodels.co.nz/details.php</a><!-- w --> 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 fanghi,
i have uploaded both css and html files.
fangs new css file:
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details.php">http://www.deskjetmodels.co.nz/details.php</a><!-- m -->
---
my old css file:
<!-- m --><a class="postlink" href="http://www.deskjetmodels.co.nz/details_old.php">http://www.deskjetmodels.co.nz/details_old.php</a><!-- m -->
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;
}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?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?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;
}