PDA

View Full Version : pls help me get rid of the spacer.gif with horiz line



mangotango
Mar 16th, 2009, 07:33 PM
hi i am new here. i am trying to (slowly) removing the spacer.gif in our older application and using CSS, and there are lots of places where a horizontal line is needed. here is the old code that is in an include file

<IMG SRC="/image/spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" VSPACE="4"><BR>

<TABLE WIDTH="622" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD WIDTH="32"><IMG SRC="/image/spacer.gif" WIDTH="32" HEIGHT="1" BORDER="0"></TD>
<TD WIDTH="590" class="hrColor"><IMG SRC="/image/spacer.gif" WIDTH="1" HEIGHT=
"2" BORDER="0"></TD>
</TR>
</TABLE>

<IMG SRC="/image/spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" VSPACE="4"><BR>

hrColor is defined elsewhere.

i tried defining the line using :
.hr_thinline
{
margin-left:32px;
width: 590px;
border-top: 2px #66cc00 solid;
height:2px;
}

but i am having problems with the 4 pixel spacing above and below the colored line. in particular we need it to work on IE6, IE6 and firefox and on IE6 i can't get the line to be in the middle.

can someone help ? thanks

kashfun
Mar 16th, 2009, 07:49 PM
since you're new, would just like to tell you to avoid using tables. Use div tags instead. You don't necessarily need the spacer.gif. You can use margin. I'd advice you to look up here (http://www.w3schools.com).

Pepe, the bull
Mar 16th, 2009, 07:55 PM
Why don't you just use the <hr> tag.



<hr class="thinline">

Then modify it in your CSS.


.thinline
{
height:2px;
width: 590px;
margin:4px auto;
color: #66cc00;
}

Excavator
Mar 16th, 2009, 08:05 PM
Hello mangotango,
Are you completely recoding the old app?

When you say you can't get IE6 to display the line in the middle, do you mean horizontally? To center things horizontally IE6 needs

a DocType declaration
element with a specified width
left/right
margins set to auto on that element
That should center it in whatever container you put it in... not sure at all what that does inside tables though.

hr demo here - http://nopeople.com/CSS/hr/index.html -As always, view the source to see how it's done.

mangotango
Mar 16th, 2009, 08:16 PM
kashfun, yes i know tables are bad :-) i was able to remove all the nested tables in our app with CSS

pepe, i will try the <hr> tag. the old app never used it (not sure why)

Excavator, no we are not recoding the complete app. we are taking baby steps. we just re-done the whole menu using CSS. i couldn't get the line to center vertically with equal spaces above and below the line. there is always more space at the bottom. i am looking at the demo now.

thank you all.