html image question
- Started
- Last post
- 18 Responses
- CygnusZero4
Ive got a 2px tall image, just a grey rule, but it seems to insist on adding about 10px of space above it. Any way to get rid of that?
- CygnusZero40
Wow strange I posted the image code, but qbn stripped it out. Maybe this will work.
<!--
<img src="http://www.kpmginfo.com/MarketingHighlights/greyrule.gif" width="569" height="2" hspace="0" vspace="0" border="0" />
-->
- bulletfactory0
any way we can see the page? could be styles on the page haven't been set (or reset). could be another style overriding margin or padding, etc.
- ukit20
In Chrome or Firefox, right-click > Inspect Element. Should be easy to see what is causing it.
- CygnusZero40
This is actually happening in IE and when I send it through Outlook.
I recall coming across this issue before but dont remeber what it was that fixed it. Been a while.
- And sorry, I do have to worry about IE unfortunately.CygnusZero4
- Even worse through Outlook though. The way it looks in IE is acceptable.CygnusZero4
- mikotondria30
I would forego trying to wrangle the image to play nicely and just put a border: 2px solid #666 on the bottom of the element...
- Al_dizzle0
if its just a simple grey line, why dont you just use an hr tag... and add some css styling to it.
- CygnusZero40
Well this line sits right below some HTML copy, so there's nothing to put a bottom border on.
I originally was using HRs, but was having spacing problems with those too, which is why I went to trying an image, and its actually even worse than the HR. -____-
- whhipp0
Are you using tables or divs?
- Tables. Has to go through Outlook which doesnt like DIVs a whole lot.CygnusZero4
- i_was0
you have to css reset the page where the image is, ex :
<style>
body{ margin: 0;padding: 0 }</style>
- whhipp0
sounds like you are making html for email, "Even worse through Outlook"...
<!--
<img style="display:block;" src="http://www.kpmginfo.com/MarketingHighlights/greyrule.gif" width="569" height="2" hspace="0" vspace="0" border="0" />
-->
- prophetone0
something like:
img.greyrule { float: left; margin: 0px 0px 0px 0px;}
<img src="greyrule.gif" class="greyrule">
- i_was0
- no extra space.i_was
- Is not working through Outlook.CygnusZero4
- maybe try deleting the doctypei_was
- CygnusZero40
Unfortunately Outlook doesnt recognize style="display:block;"
- wtf, what a cunt - refuse to play it's stupid games. This is 2012 - on the internet, recognise or diemikotondria3
- prophetone0
if you place it inside it's own table row at the bottom it should snap tight, as i recall
- CygnusZero40
Giddy up. Putting the rule in its own table is what Outlook does like. Nice, thank you!
- seeessess0
^ TABLE? WTF!
html:
<div class="line"> </div>css:
.line {height:2px; width:100%; overflow:hidden; background:#ccc; display:block;}- ahh, you're doing an email. Didn't read that part :o)seeessess
- shouldn't matter - it's HTML. Display it properly, or just show us the raw plain text, we can cope.mikotondria3
- Lol @ shouldnt matter. Outlook is much more picky than any browser.CygnusZero4
- vaxorcist0
Outlook email... party like it's 1999.....
ok, seriously....
outlook's HTML interpreter was "updated" to be the same one in an older version of Microsoft Office's Word, so you're not back to 2007, more like 2003 or 1999...