I'm sure this has been discussed, but I haven't been able to find it, so here goes.
The following is what I use to define a <div> that forms a "psuedo button"
.butnitm {
margin-top: 8px;
padding-left: 10px;
border: 1px solid #98002E;
background-color: #EAEAEA;
font-size: 16px;
font-weight: normal;
color: #000000;
}
Notice that no width is specified. The width is defined in a "style" attribute based on the amount of text (and other factors at times), and therein lies the problem. IE adds the padding to the width, and Firefox does not. So if I define the width to suit IE there is an awkwardly long space to the right of the text, if I define it for Firefox, the text crowds the right border in IE.
It gets worse when I'm making the buttons fixed width and putting them in columns, and even worse yet when they are in two columns. The whole issue is that pesky "width" vs "padding" issue.
If the width were in the style definition, of course, I could use an IE hack to resolve it. But I haven't figured out a way to deal with it when the width is dynamic. I can't just pad it on the right and leave the width undefined, because I frequently am making the "buttons" a fixed width so that they make a neat column.
Is there an IE hack for this situation?Make sure you assign a valid doctype to your file. Without one, IE runs in "quirks" mode and does not calculate widths per the HTML spec. With a valid doctype, IE will then use the same (correct) calculation that FF uses.
<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->
I recommend using the HTML 4.01 Strict DTD unless you have a specific reason to use another one.Note that only applies to IE6.
If you're designing for IE5 then you need a hack or workaround.re-reading your question, I think your answer lies in assigning a width to the container element.
edit: I've just uploaded a useful article (well, in my opinion it is!) explaining the box model (<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/web_design/articles/box_model.php">http://www.emdevelopments.co.uk/web_des ... _model.php</a><!-- m -->)I'm using HTML 4.01 strict. Viewers are a mixture of Firefox, IE6 and (here's the problem) IE5.5.How about this solution:
Put a container around all your buttons, then assign a width to it.
Then put display: block; on each of your buttons (since it's a div that should be it's normal state anyway).I gave up on trying to do it with padding. I took out the left padding and just enter my text with two "hard spaces" for padding.
May not be very elegant, but it gets the job done.
<div class='etc'>
Button Text
</div>Dave's solution is the way to go. To put some code to his words:
<div id="buttons">
<div class='etc'>Button Text</div>
</div>
And in CSS:
#buttons {
width: <width of buttons>px;
}
#buttons .etc {
border: <border you want>;
padding-left: <padding you want>px;
}Doesn't that assume a fixed width for the button?
Part of my original requirment is that I be able to specify the width in the "style" attribute and not in the "class" or "id."CSS.butnitm {
display: block;
margin-top: 8px;
border: 1px solid #98002E;
background-color: #EAEAEA;
color: #000;
font-size: 16px;
font-weight: normal;
text-align: center;
}example<div class="butnitm" style="width: 50px;">button</div>Doesn't that assume a fixed width for the button?
Part of my original requirment is that I be able to specify the width in the "style" attribute and not in the "class" or "id."
Yup. You still can. CSS in the style attribute always overrides anything in a style sheet, as long as you place the style="width: Xpx;" in the #buttons DIV. Now if you want each and every button to have a different width, then you'll either have to put up with IE5-Win's incorrect box model, or place some extra styles to give IE5-Win a false width and the rest the correct width.
.etc {
padding-left: 20px;
}
.
.
.
<div class='etc'
style="width: 100px; voice-family: "\"}\""; voice-family: inherit; width: 80px;"
>button</div>
The width before the voice-family hack gets read by IE5-Win. All other browsers read the second width declaration after the voice-family hack. Read more on the voice-family hack (<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->).I'm sure this has all been covered however i cannot seem to find anything to help....
I am designing a website for my local church youth club so it has to be bright and breezy!!!
I am however having the usual problems with IE and Firefox. The box model hack doesn't work as i am using IE 6. I saw someone mention using the correct DocType. I assume i am but cannot be sure.
Check out <!-- w --><a class="postlink" href="http://www.daveandhelen.com/stmungos3">www.daveandhelen.com/stmungos3</a><!-- w -->. At the moment it works in IE but not in Firefox. It was all fine until i added a bit of padding on the pink "Welcome" box!
Any ideas???
ThanksI'm sure this has all been covered however i cannot seem to find anything to help....
I am designing a website for my local church youth club so it has to be bright and breezy!!!
I am however having the usual problems with IE and Firefox. The box model hack doesn't work as i am using IE 6. I saw someone mention using the correct DocType. I assume i am but cannot be sure.
Check out <!-- w --><a class="postlink" href="http://www.daveandhelen.com/stmungos3">www.daveandhelen.com/stmungos3</a><!-- w -->. At the moment it works in IE but not in Firefox. It was all fine until i added a bit of padding on the pink "Welcome" box!
Any ideas???
Thanks
You've got some cleanup work ahead of you: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.daveandhelen.com%2Fstmungos3%2F">http://validator.w3.org/check?uri=http% ... mungos3%2F</a><!-- m -->
You have 2 doctypes, 1 for XHTML and 1 for HTML. Choose one. Then re-submit to the above validator and fix any other problems. Then you're ready to attack style issues and browser compatibility issues. As long as the HTML is invalid, all bets are off for getting the visual appearance to be the same accross browsers.Quote:
Originally Posted by webleymk3
I'm sure this has all been covered however i cannot seem to find anything to help....
I am designing a website for my local church youth club so it has to be bright and breezy!!!
I am however having the usual problems with IE and Firefox. The box model hack doesn't work as i am using IE 6. I saw someone mention using the correct DocType. I assume i am but cannot be sure.
Check out <!-- w --><a class="postlink" href="http://www.daveandhelen.com/stmungos3">www.daveandhelen.com/stmungos3</a><!-- w -->. At the moment it works in IE but not in Firefox. It was all fine until i added a bit of padding on the pink "Welcome" box!
Any ideas???
Thanks
You've got some cleanup work ahead of you: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=h...%2Fstmungos3%2F">http://validator.w3.org/check?uri=h...%2Fstmungos3%2F</a><!-- m -->
You have 2 doctypes, 1 for XHTML and 1 for HTML. Choose one. Then re-submit to the above validator and fix any other problems. Then you're ready to attack style issues and browser compatibility issues. As long as the HTML is invalid, all bets are off for getting the visual appearance to be the same accross browsers.
Ok, i see what you are saying, but am having some serious issues working out which doctype to use. There must be something in my page that is not agreeing with the validator. By that i mean i went through most of the Doctypes on <!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m --> only to find none of them work.
Thought... it will only say the Doctype is correct if the HTML on the page is correct???
Not sure where to look next... Some pointers would be much appreciated!
Thanks
webleymk3That page is absolute crap when it comes to doctypes. Doctypes are actually separate files, and the tags listed on that W3C page are relative links to the doctype files. You need an absolute link: Fix Your Site With The Right Doctype (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->).Just to say thanks to you guys for your help. The site is really coming on. not got it verified yet but got the divs working the same in IE and FF. CSS pull down menus working too!!!
Thanks again
The following is what I use to define a <div> that forms a "psuedo button"
.butnitm {
margin-top: 8px;
padding-left: 10px;
border: 1px solid #98002E;
background-color: #EAEAEA;
font-size: 16px;
font-weight: normal;
color: #000000;
}
Notice that no width is specified. The width is defined in a "style" attribute based on the amount of text (and other factors at times), and therein lies the problem. IE adds the padding to the width, and Firefox does not. So if I define the width to suit IE there is an awkwardly long space to the right of the text, if I define it for Firefox, the text crowds the right border in IE.
It gets worse when I'm making the buttons fixed width and putting them in columns, and even worse yet when they are in two columns. The whole issue is that pesky "width" vs "padding" issue.
If the width were in the style definition, of course, I could use an IE hack to resolve it. But I haven't figured out a way to deal with it when the width is dynamic. I can't just pad it on the right and leave the width undefined, because I frequently am making the "buttons" a fixed width so that they make a neat column.
Is there an IE hack for this situation?Make sure you assign a valid doctype to your file. Without one, IE runs in "quirks" mode and does not calculate widths per the HTML spec. With a valid doctype, IE will then use the same (correct) calculation that FF uses.
<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->
I recommend using the HTML 4.01 Strict DTD unless you have a specific reason to use another one.Note that only applies to IE6.
If you're designing for IE5 then you need a hack or workaround.re-reading your question, I think your answer lies in assigning a width to the container element.
edit: I've just uploaded a useful article (well, in my opinion it is!) explaining the box model (<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/web_design/articles/box_model.php">http://www.emdevelopments.co.uk/web_des ... _model.php</a><!-- m -->)I'm using HTML 4.01 strict. Viewers are a mixture of Firefox, IE6 and (here's the problem) IE5.5.How about this solution:
Put a container around all your buttons, then assign a width to it.
Then put display: block; on each of your buttons (since it's a div that should be it's normal state anyway).I gave up on trying to do it with padding. I took out the left padding and just enter my text with two "hard spaces" for padding.
May not be very elegant, but it gets the job done.
<div class='etc'>
Button Text
</div>Dave's solution is the way to go. To put some code to his words:
<div id="buttons">
<div class='etc'>Button Text</div>
</div>
And in CSS:
#buttons {
width: <width of buttons>px;
}
#buttons .etc {
border: <border you want>;
padding-left: <padding you want>px;
}Doesn't that assume a fixed width for the button?
Part of my original requirment is that I be able to specify the width in the "style" attribute and not in the "class" or "id."CSS.butnitm {
display: block;
margin-top: 8px;
border: 1px solid #98002E;
background-color: #EAEAEA;
color: #000;
font-size: 16px;
font-weight: normal;
text-align: center;
}example<div class="butnitm" style="width: 50px;">button</div>Doesn't that assume a fixed width for the button?
Part of my original requirment is that I be able to specify the width in the "style" attribute and not in the "class" or "id."
Yup. You still can. CSS in the style attribute always overrides anything in a style sheet, as long as you place the style="width: Xpx;" in the #buttons DIV. Now if you want each and every button to have a different width, then you'll either have to put up with IE5-Win's incorrect box model, or place some extra styles to give IE5-Win a false width and the rest the correct width.
.etc {
padding-left: 20px;
}
.
.
.
<div class='etc'
style="width: 100px; voice-family: "\"}\""; voice-family: inherit; width: 80px;"
>button</div>
The width before the voice-family hack gets read by IE5-Win. All other browsers read the second width declaration after the voice-family hack. Read more on the voice-family hack (<!-- m --><a class="postlink" href="http://tantek.com/CSS/Examples/boxmodelhack.html">http://tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->).I'm sure this has all been covered however i cannot seem to find anything to help....
I am designing a website for my local church youth club so it has to be bright and breezy!!!
I am however having the usual problems with IE and Firefox. The box model hack doesn't work as i am using IE 6. I saw someone mention using the correct DocType. I assume i am but cannot be sure.
Check out <!-- w --><a class="postlink" href="http://www.daveandhelen.com/stmungos3">www.daveandhelen.com/stmungos3</a><!-- w -->. At the moment it works in IE but not in Firefox. It was all fine until i added a bit of padding on the pink "Welcome" box!
Any ideas???
ThanksI'm sure this has all been covered however i cannot seem to find anything to help....
I am designing a website for my local church youth club so it has to be bright and breezy!!!
I am however having the usual problems with IE and Firefox. The box model hack doesn't work as i am using IE 6. I saw someone mention using the correct DocType. I assume i am but cannot be sure.
Check out <!-- w --><a class="postlink" href="http://www.daveandhelen.com/stmungos3">www.daveandhelen.com/stmungos3</a><!-- w -->. At the moment it works in IE but not in Firefox. It was all fine until i added a bit of padding on the pink "Welcome" box!
Any ideas???
Thanks
You've got some cleanup work ahead of you: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.daveandhelen.com%2Fstmungos3%2F">http://validator.w3.org/check?uri=http% ... mungos3%2F</a><!-- m -->
You have 2 doctypes, 1 for XHTML and 1 for HTML. Choose one. Then re-submit to the above validator and fix any other problems. Then you're ready to attack style issues and browser compatibility issues. As long as the HTML is invalid, all bets are off for getting the visual appearance to be the same accross browsers.Quote:
Originally Posted by webleymk3
I'm sure this has all been covered however i cannot seem to find anything to help....
I am designing a website for my local church youth club so it has to be bright and breezy!!!
I am however having the usual problems with IE and Firefox. The box model hack doesn't work as i am using IE 6. I saw someone mention using the correct DocType. I assume i am but cannot be sure.
Check out <!-- w --><a class="postlink" href="http://www.daveandhelen.com/stmungos3">www.daveandhelen.com/stmungos3</a><!-- w -->. At the moment it works in IE but not in Firefox. It was all fine until i added a bit of padding on the pink "Welcome" box!
Any ideas???
Thanks
You've got some cleanup work ahead of you: <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=h...%2Fstmungos3%2F">http://validator.w3.org/check?uri=h...%2Fstmungos3%2F</a><!-- m -->
You have 2 doctypes, 1 for XHTML and 1 for HTML. Choose one. Then re-submit to the above validator and fix any other problems. Then you're ready to attack style issues and browser compatibility issues. As long as the HTML is invalid, all bets are off for getting the visual appearance to be the same accross browsers.
Ok, i see what you are saying, but am having some serious issues working out which doctype to use. There must be something in my page that is not agreeing with the validator. By that i mean i went through most of the Doctypes on <!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m --> only to find none of them work.
Thought... it will only say the Doctype is correct if the HTML on the page is correct???
Not sure where to look next... Some pointers would be much appreciated!
Thanks
webleymk3That page is absolute crap when it comes to doctypes. Doctypes are actually separate files, and the tags listed on that W3C page are relative links to the doctype files. You need an absolute link: Fix Your Site With The Right Doctype (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->).Just to say thanks to you guys for your help. The site is really coming on. not got it verified yet but got the divs working the same in IE and FF. CSS pull down menus working too!!!
Thanks again