CSS question
- Started
- Last post
- 38 Responses
- CygnusZero4
I've got an HR and for some reason there's unwanted white space above it that I cant seem to get rid of. It's a good 15px of space.
Not an expert at this stuff. Here's the code.
hr {
color:#85c446;
height:2px;
}
- albums0
margin:0;
padding:0;
border:0;
outline:0;
- qoob0
Use Firebug or whatever equivalent there is for your browser to look at the styles for the element. Makes it easy to figure out stuff like this
- This may not work as browser defaults don't show.orrinward2
- CygnusZero40
This is for an html newsletter. Even with those settings albums posted it still insists on adding its own space. Im 100% sure the objects above it have no space around them.
- Actually they're just images above them with no white space built into them.CygnusZero4
- Just make the rule an image as well.ETM
- Was really hoping to avoid that.CygnusZero4
- mikotondria30
Can't you just put a 2px border, plus whatever margin, on the base of the element above where the HR is supposed to be ? HR just seems somewhat unsemantic to me, even though strictly it might not be.
- ETM0
If it's a newsletter, the rules go out the window. Try styling the HR element inline, if you haven't already.
Sometimes you have to just use old-school deprecated tags for these blasted emails.
Or, of course, just make the horizontal rule out of an image, a 1 pixel gif with whatever transparent spacing you need above/below and stretch it to the width required.
- ukit20
There is always some reason for extra space, it doesn't just appear out of nowhere. Use Firebug and see what is adding the space or post your code online somewhere so we can take a look.
- < Yeah, browser and email client default values in default style sheets.ETM
- yeh, email clients are a cunt.
Hack the shit out of it, tables, spacer.gifs, anything. Sheeit.mikotondria3
- CygnusZero40
Separate problem. A simple 2 column 570px wide table. Left column is 50px with a 50px wide image in it, right column is 520px that will just have some copy in it.
Problem is the left column is being forced to about 90px wide. I have no idea why. I dont have any CSS in here at all. Just basic stuff that wont work properly in IE or Outlook, but looks fine in Firefox.
<table width="570" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50" valign="top"><img src="icon1b.jpg" alt="" width="50" height="45" border="0" align="left" /></td><td width="520" valign="top">
<ul>
<li>Lorem ipsum</li>
</ul>
</td>
</tr>
</table>- http://www.w3.org/TR…aaux
- The html provided looks fine, something else must be affecting it.crillix
- i_was0
use a 1x1 pixel gif as a hr
- i_was0
example:
http://pastie.org/4407151
- CygnusZero40
^ Tried what you said. Seems to insist on adding about 10px of space above the spacer gif. My main problems here are stemming from space being added around images.
- < always add CSS (line-height:0) in the TD-tag to avoid space around the imagenoel
- voiceof0
For the hr issue:
http://stackoverflow.com/questio…
- i_was0
ok so add this:
body{margin: 0;padding: 0; }
img{ border: 0 }
- CygnusZero40
Alright most of my problems are fixed. Thanks kids. I wasnt able to get the hr perfect, it still seems to want to add 5px above and below it no matter what I do, but it still looks ok.
The spacer gif had issues due to another table I had in there, and the spacer gif insisted on actually appear ABOVE that table which isnt good.
Anyway thanks.
- JamesBoynton0
Can you post a link or full code? Should be simple enough to get to the bottom of with inspect element.
- fadein110
margin: 0px!important;
padding: 0px!important;
- CygnusZero40
One last question. I have an image that needs to be a print button. Im looking around and see ways to make actual print form buttons, but how do you put the print code on a custom image?
- CygnusZero40
Jesus it never ends. Now I have a 1px tall image that insists on having 10px of white space above it. Tried all the tricks with line-height, not working.
- CygnusZero40
^ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- I tried just removing this. Doesnt fix it. Fucking images.... grrrr. Tons of spacing problems around them.CygnusZero4
- CygnusZero40
HTML pisses me off. Why cant I have a damn 1px tall image, and not have 10px of white space above the damn thing????????? annoying