[SOLVED] Problem with the blockquote's width and title

[felipeebs]

Hi,

I'm trying to make a design for a blog and found only one problem: the blockquote.

When to cite something, the most of blog systems generate a blockquote.

I'm testing with 3 browsers: IE6, Firefox and Opera, and in all browsers the same thing:

The css:

blockuote {
...
width: 500px;
display: block;
...
}
code {
...
width: 500px;
display: block;
...
}

 

In the html, a blockquote and a code to compare.

 

Whatever I do, the blockquote box still larger than the code box.

 

Someone can help me with it?

 

thanks

 

PS: bad english

[moberemk]

You misspelled blockquote as blockuote. It's the silly mistakes like this that really bug me, like saying wrapper #content and leaving out the id #.

[felipeebs]

really? oh! sorry! my bad!!!!

I know I had to copy&paste my code but i didn't... and I had not much time to write the post... so... let's copy&paste!

The CSS:

blockquote {
background-color: #444;
border: dotted 1px #ddd;
width: 500px;
display: block;
margin: 20px auto;
padding: 5px 30px 5px 30px;
}
code {
background-color: #444;
border: dashed 1px #ddd;
width: 500px;
display: block;
margin: 20px auto;
padding: 5px 5px 5px 30px;
overflow: auto;
white-space: nowrap;
}

 

and the interesting part of body:

<blockquote>Blockquote cites something.<br />
Don't it?</blockquote>
<code>Code{<br />
 with more than one line<br /> 
 to test the box<br />
 and here is a extremelly long line to test the wrap of this box. in case of nowrap may appear some scroll bar on the bottom of this box, but only on bottom!<br />
 But not in every browser I think.. IE displays a vertical scroll bar.<br />
}</code>

 

Good enough to understand my need for really helping answers?

Thanks

[moberemk]

Simple enough. When you add padding, you make the box bigger to accomodate the padding, right? so basically, your blockquote box is 560px (500+30+30) whereas your code box is 535 (500+5+30). Try copying and pasting the padding for the boxes so that they're identical.

[felipeebs]

Alright! thank you very much man! u saved my life!

 

I've  never learned that the padding increases the width... well... I am just a new webdesigner breaking my way thru the egg shell!

 

Topic solved by moberemk

[moberemk]

Well, it does increase width ACCORDING TO W3C SPECIFICATIONS. However, in IE, it doesn't do that, meaning that it will only be 500px wide in those.

And you're welcome.