Width and Padding issues — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Width and Padding issues

This page's ID: 25885

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	For the first time ever and I'm shocked at this... IE is actually showing my site [b]perfectly[/b]!! Now I have problems with Opera and FireFox which seem to be outputting the same result which is not what I want!! What's the problem?? Well it goes something like this... ... I've just created a new and totally awesome layout for my site WOW!! So I fire up GoLive (do most of my web coding in it -- sweet thing) and start creating the structure of the page in XHTML. Ok so far then comes the real juicy bit... CSS! I make the layout and it works nicely in all three browsers then I come to the 'text' stylesheet and start creating how I'd like the typography to look. My design is somewhat like this, I have a header on top a navigation below and then the content begins. (All are in seperate divs) The problem I have is with the paragraphs. Allow me to illustrate: [img]http://img281.echo.cx/img281/3816/eg9op.gif[/img] What you see above is a little example of what my paragrahs look like. I have a left border and a right border. I've specified a width to the paragraphs and headings as I don't want them to exceed that width and I've added some padding as well (see code below). In IE I don't have any problem but in FF and Opera it adds some extra padding to the right of the paragraph when I've strictly specified an amount in the code. To be more specific the border right moves to the right several extra pixels and that ruins the whole layout. How do I stop that from happening? My host isn't allowing me to upload any files for some reason even though my whole site is uploaded there so I can't provide you a better example sorry... ... another thing! This is new for me and I'm kinda scared of what the out come will be! I've made the layout in such a way that specific paragraphs will have some extra information that will be written on the side of the para much like the one's on [url=http://www.meyerweb.com/]Eric Meyer's[/url] site. How do you make those? Do I have to make div's for those extra info's or can I do it using just paragraphs and some classes? [i]I've added the CSS code and XHTML structure as well I can't make a full example so I'll have to do with this[/i] [b][i]CSS[/i][/b] [code] p { font: 9pt Verdana, Arial, san-serif; color: #7f7f7f; line-height: 18px; margin: 0; padding: 10px 19px 10px 19px; border-left: 5px solid #f2f2f2; border-right: 5px solid #f2f2f2; float: left; width: 565px; } h1 { font: 20px "Trebuchet MS", Helvetica, Verdana, Arial, san-serif; color: #626262; width: 565px; margin: 0; padding: 6px 19px 12px 19px; border-left: 5px solid #f2f2f2;border-right: 5px solid #f2f2f2; } h2 { font: 16px "Trebuchet MS", Helvetica, Verdana, Arial, san-serif; color: #000; width: 565px; margin: 0; padding: 0 19px 0 19px; border-left: 5px solid #f2f2f2; border-right: 5px solid #f2f2f2; }[/code] [b][i]XHTML[/i][/b] [code] <div id="main"> <div id="head"></div> <div id="nav"> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </div> <div id="content"> <h1 class="fresh">Heading 1</h1> <h2>Heading 2</h2> <p>lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar</p> </div> </div>[/code] [img]http://www.timdorr.com/neosig/sigs/templar.gif[/img] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu