Forum : Bottom border for h1
Brief description  about Online courses   join in Online courses
View Santosh  Hegde 's Profile

Bottom border for h1

Dear sir,
i developed a page, and declared h1 bottom border like:
h1 {
width: 458px;
margin: 10px 0 0 0;
padding: 20px 0 10px 0;
letter-spacing: none;
font-size: 1.4em;
font-family: Trebuchet MS, Arial, Hevetica, sans-serif;
color:#306EFF;
border-bottom: 1px solid #999999;
}
it gives very good result in IE FF.
But it is does not support in Opera Crome and Safari.
so what to do for proper display?
please guide me...!!

Thanks
Asked by Santosh Hegde | Dec 17, 2010 |  Reply now
Replies (5)
View santosh hegde 's Profile
Thank you Very Much Sir,
i`ll try these code...
Dec 22, 2010
View teacher siliconindia 's Profile
and for green border bottom no need to use image, write css style for that.
Dec 21, 2010
View teacher siliconindia 's Profile
Hi


In your asite I saw css link like this

<link href="style.css" rel="stylesheet" type="text/css" />
<link href="homeoutside/formozilla.css" rel="stylesheet" type="text/css" />




Remove this links bcz you are giving same link in down as condition

<link href="homeoutside/forie.css" rel="stylesheet" type="text/css" />
<link href="homeoutside/forie7new.css" rel="stylesheet" type="text/css" />





<!--[if IE 6]>

<link href="qaforie.css" rel="stylesheet" type="text/css" />

<![endif]-->

<!--[if IE 7]>

<link href="qaforie7.css" rel="stylesheet" type="text/css" />

<![endif]-->



Regards
Dec 21, 2010
View santosh hegde 's Profile
actually it was for a project, and i have to give bottom border for h1.
and It still showing the same result in my system,
and you are suggested to use default font family abow,
But in the special cause these fonts are not looking attractive...!!
so i used font-family: Trebuchet MS, Arial, Hevetica, sans-serif;
to make looking attractive headding.
and also i got alternative solution for it
i used a GIF image 1px height and width 15px, as bottom border for 'h1'
i used code for this:
h1 {
width: 458px;
margin: 10px 0 0 0;
padding: 20px 0 10px 0;
letter-spacing: none;
font-size: 1.4em;
font-family: Trebuchet MS, Arial, Hevetica, sans-serif;
color:#306EFF;
background: url(images/line.gif) repeat-x left bottom;
}
and please visit a website,
http://www.vishwaelectrical.biz
to find something
this site designed and hosted by me...!! :)

with thanks & Regards,
Santosh Hegde.
Dec 21, 2010
View teacher siliconindia 's Profile
Hi

I checked your code, it,s showing same in all browsers, please check again..and use normal fonts which all system should have, ex:Arial,Verdana, Helvetica, sans-serif, Georgia etc

Regards

Dec 19, 2010