Padding and Widths - Firefox problem [Archive]

View Full Version : Padding and Widths - Firefox problem

jonathanscary

06-25-2005, 10:18 PM

Hi

I'm working on this page:

http://www.numberstore.net/style.asp

If you look at the bottom left block (Lorem ipsum) in IE, you can see that the width is correct and the padding of 6px is not changing the overall dimension of the block.

However in Firefox, unless I set the padding to 0 (not the desired effect), the block becomes too wide.

The only fix I seem to be able to find for this is:

-moz-box-sizing: border-box; box-sizing: border-box;

(which is apparently not valid, though it does seem to work)

Am I missing something really simple here?

CSS for the block in question below:

#block_7 {
float: left;
text-align: left;
width: 469px;
height: 195px;
background-image: url(/images/numberstore/row4-left.jpg);
background-color: #E5E9F3;
background-repeat: sno-repeat;
padding: 6px;
border-top: 1px solid #064AAB;
border-bottom: 1px solid #FFFFFF;
}

mrruben5

06-25-2005, 11:32 PM

Trying to solve problems in a page with errors isn't going to work, and, with IE in quirks mode, it's horrible.

1. Make sure you attach a DTD (http://htmlhelp.com/tools/validator/doctype.html).
2. Validate your code using the HTML validator (http://htmlhelp.com/tools/validator/index.html)

I suggest you take the transitional document type.

If you think errors aren't errors at all, eg the target="_blank", we may know solutions for this that take out those errors in the html.

JamieR

06-25-2005, 11:35 PM

Something else to note - put your links in unordered list format ;)

jonathanscary

06-26-2005, 12:13 AM

Ok, thanks for that. I've cleaned up the code, except for adding alt tags and moving the <form> tags inside DIVs. I've always found that keeping form tags just inside <table> or <tr> tags stops the cells from getting too large.

In the process I've fixed the padding problem by reducing the overall width of the block by twice the padding dimension (logical I guess!)

What did you mean by putting the links as an unordered list??

Would this help me to lose that table? How do I create the same effect (ie without bullet points? What would I need to replace this with:

<table cellspacing="4" width="469"?
<tr align="center">
<td height="40"><a href="numbers.asp" class="main-menu">NUMBERS</a></td>
<td height="40"><a href="services.asp" class="main-menu">SERVICES</a></td>
<td height="40"><a href="support.asp" class="main-menu">SUPPORT</a></td>
<td height="40"><a href="about-us.asp" class="main-menu">ABOUT US</a></td>
</tr>
</table>

(because I'd love to get rid of it!!!)

JamieR

06-26-2005, 12:24 AM

Yeah, I think it would be a good idea to loose all the tables. Links and navigation items are supposed to be unordered lists - so <ul><li></li></ul> until XHTML 2 comes out.

Sorry to be a picky git, but it doesn't validate (http://validator.w3.org/check?verbose=1&uri=http%3A//www.numberstore.net/style.asp) :D

If you want to use the unordered list method for your links, just use:

li { list-style-type:none; display:inline; };
that will make the li element of the list have no bullet and display all on one line, hence the display:inline property :)

jonathanscary

06-26-2005, 12:35 AM

thanks ever so much!!

looking great. just a few more bits to clean up. This is a BILLION times better than those pages and pages of nested tables!

WOW - what a revelation.

:thumbsup:

jonathanscary

06-26-2005, 12:38 AM

Don't understand the doesn't validate - the doc starts with the following:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Is this no good??

sesshyzkidz

06-26-2005, 03:54 AM

Try out this link to see about validation:
http://validator.w3.org/check?ss=1&outline=1&verbose=1 (http://validator.w3.org/check?ss=1&outline=1&verbose=1&uri=http%3A%2F%2Fwww.numberstore.net%2Fstyle.asp)&uri=http%3A%2F%2Fwww.numberstore.net%2Fstyle.asp (http://validator.w3.org/check?ss=1&outline=1&verbose=1&uri=http%3A%2F%2Fwww.numberstore.net%2Fstyle.asp)

Ranger56

06-26-2005, 04:18 AM

jonathanscary

06-26-2005, 11:35 AM

dreamweaver seems to put that in. I'll remove it.

JamieR

06-26-2005, 11:35 AM

That's for the ASP side of things...

jonathanscary

06-26-2005, 11:43 AM

then I'd better leave it!