Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Borders....... 1

Status
Not open for further replies.
JimJx

JimJx

Technical User
Feb 16, 2001
202
US
Hi all,

I have what is (hopefully) my last question...

I have the following layout:

Code: 
**************
*            *
*    TOP     *
**************
*   menu     *
**************
*everything  *
*  else      *
**************

I want the border to run down the sides of the menu, a border along the bottom, and then a border around everyhting else.

Get this, it actually works fine in IE! in FF the border on the right runs all of the way to the top.

I know it is something in my css..... So if someone can take a look I would appreciate it.

Code: 
body {
	margin:0px 0px; 
    padding:0px;
	text-align:center;
}
	
.Content {
	width:780px;
	margin:0px auto;
	text-align:left;
	background-color:#fff;
    position: relative;
}

#main_content {
	width:780px;
    min-height:500px;
    _height: 200px;
	background-color:#fff;
    border-bottom:  1px solid #0000ff;
          border-left:  1px solid #0000ff;
          border-right:  1px solid #0000ff;
    
} 

a:link {
	            text-decoration: none;
}

a:hover {
	        TEXT-DECORATION: underline overline;
            color: #0000ff; 
}

a:visited {
          text-decoration: none;
          color: #0000ff;
}

a:active { 
         color: #0000ff;
}

.maintext {
	        font-family: Verdana, Arial, Helvetica, sans-serif;
	        font-size: 12px;
	        color: #ffffff;
	        line-height:16px;
}	

.bottom {
	        font-family: Verdana, Arial, Helvetica, sans-serif;
	        font-size: 10px;
	        color: #4985BC;
	        line-height:35px;
}

.headpic {
          margin: 0;
          float: left;
          padding:0;
}

.head2 {
          margin: 0;
          float: left;
          padding:0;
          width: 780px;
          height: 39px;
          background-image:  url(../images/index_10.jpg);
          border-bottom:  1px solid #0000ff;
          border-left:  1px solid #0000ff;
          border-right:  1px solid #0000ff;
}

.menu {
          color: #0033cc;
          font-family: Verdana, Arial, Helvetica, sans-serif;
	      font-size: 14px;
          padding-top: 15px;
          padding-left: 10px;
          font-weight: bold;
          float: left;
}

.seperator {
          color: #0033cc;
          font-family: Verdana, Arial, Helvetica, sans-serif;
	      font-size: 16px;
          padding-top: 14px;
          padding-left: 10px;
          font-weight: bold;
          float: left;
}

And the HTML

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Valley Web Network -- Your LOCAL Web Hosting Solution</title>
  <link REL="STYLESHEET" TYPE="text/css" HREF="css/styles.css">
</head>
<body>
<div class="Content">

<div class="headpic">
<img src="../MyHT/images/top.jpg" height="153" alt="" border="0"></div><div class="head2">
<div class="menu"><a href="index.html">Home</a></div>
<div class="seperator">|</div>
<div class="menu"><a href="plans.html">Hosting Plans</a></div>
<div class="seperator">|</div>
<div class="menu"><a href="support.html">Support</a></div>
<div class="seperator">|</div>
<div class="menu"><a href="test.html">Testimonials</a></div>
<div class="seperator">|</div>
<div class="menu"><a href="faq.html">FAQ</a></div>
<div class="seperator">|</div>
<div class="menu"><a href="about.html">About Us</a></div>
<div class="seperator">|</div>
<div class="menu"><a href="contact.html">Contact Us</a></div>
</div>

<div id="main_content">
<img src="../MyHT/images/left_servers.jpg" border="0">
</div>




</div>
</body>
</html>

Thanks in advance,
Jim
 
Sort by date Sort by votes
You're not using a complete and valid doctype. Before you put that in, it's no point debugging your code.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
I can't tell exactly how you want this to look cause I can't see the images. The border is going all the way to the top in FF because you have too many left-floated elements (in particular, your menu). Remove the left float from these two CSS classes:

Code: 
.headpic {
          margin: 0;
          [s]float: left;[/s]
          padding:0;
}

.head2 {
          margin: 0;
          [s]float: left;[/s]
          padding:0;
          width: 780px;
          height: 39px;
          background-image:  url(../images/index_10.jpg);
          border-bottom:  1px solid #0000ff;
          border-left:  1px solid #0000ff;
          border-right:  1px solid #0000ff;
}

This should allow you to get to a point where you can fix what you need to.

[monkey][snake] <.
 
Upvote 0 Downvote
One more quick thing, order all your anchor pseudoclasses with the acronym LoVe HAte.

Put link first, then visited, then hover, then active, otherwise you may see some funky things.

Code: 
a:link {
                text-decoration: none;
}

a:visited {
          text-decoration: none;
          color: #0000ff;
}

a:hover {
            TEXT-DECORATION: underline overline;
            color: #0000ff; 
}

a:active { 
         color: #0000ff;
}

[monkey][snake] <.
 
Upvote 0 Downvote
Excellent monksnake, thanks a lot.....
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

OsakaWebbie
  • Locked
  • Question
Borders don't paint right, esp. Firefox 1
Replies
6
Views
98
IPGuru
IPGuru
jpadie
  • Locked
  • Question
creating form type boxes with half-height borders 2
Replies
9
Views
154
jpadie
jpadie
leonnk
  • Locked
  • Question
Transparent Curved Borders 1
Replies
6
Views
84
ChrisHunt
ChrisHunt
Sadruddin
  • Locked
  • Question
(Yet another) Borders issue between IE7&amp;FF
Replies
9
Views
105
Sadruddin
Sadruddin
Griffyn
  • Locked
  • Question
removing borders from a table 1
Replies
2
Views
135
Griffyn
Griffyn

Part and Inventory Search

Sponsor

Back
Top