Divider line

Dan06 · December 16, 2008

I want to divide sections of my webpage with a "divider line," and have space of 15px above & below the line. The code I have for it is pretty simple:

.divider{
clear: left;
margin-top: 15px;
padding-top: 15px;
border-top: #999999 solid medium;
}

The space BELOW the line is as desired, but for some reason there is NO SPACE above the line. Suggestions on what might be wrong and how to fix it appreciated.

TheFilmGod · December 16, 2008

I want to divide sections of my webpage with a "divider line," and have space of 15px above & below the line. The code I have for it is pretty simple:
.divider{
clear: left;
margin-top: 15px;
padding-top: 15px;
border-top: #999999 solid medium;
}
The space BELOW the line is as desired, but for some reason there is NO SPACE above the line. Suggestions on what might be wrong and how to fix it appreciated.

margin: 15px 0 0 0;

padding: 0 0 15px 0;

Dan06 · December 16, 2008

The suggested code doesn't work. My goal is to have content and divider display as follows:

content

_____________

content

Currently, the content and divider are displaying as:

content

content

The html is

<div class="tab current">
    
    <fieldset class="profilePicture"><legend>Current Profile Picture</legend>
    	<div id="profileImg"></div>
    </fieldset>
    <br />
    <form name="profileImgForm" id="profileImgForm" enctype="multipart/form-data" method="post" action="image_upload.php" target="imgUploadFrame">
    <label class="label">Upload Picture:<br/>
    <input type="file" name="imgFile" id="imgFile" /><input type="submit" name="saveProfileImg" value="Save" /></label>
    </form><iframe name="imgUploadFrame" id="imgUploadFrame"></iframe><br />
    <label class="label">Click below to remove picture <br/>
    <input style="vertical-align:bottom" type="button" name="removeProfilePic" id="removeProfilePic" value="Remove Profile Picture"/></label>
  
    <div id="editAddress" class="divider"></div>
  
</div>

xtopolis · December 17, 2008

Something like this?

<html>
<head>
<style type="text/css">
.divider{
clear: left;
margin: 15px 0;
}
</style>
</head>
<div class="tab current">
   
    <fieldset class="profilePicture"><legend>Current Profile Picture</legend>
       <div id="profileImg"></div>
    </fieldset>
    <br />
    <form name="profileImgForm" id="profileImgForm" enctype="multipart/form-data" method="post" action="image_upload.php" target="imgUploadFrame">
    <label class="label">Upload Picture:<br/>
    <input type="file" name="imgFile" id="imgFile" /><input type="submit" name="saveProfileImg" value="Save" /></label>
    </form><iframe name="imgUploadFrame" id="imgUploadFrame"></iframe><br />
    <label class="label">Click below to remove picture <br/>
    <input style="vertical-align:bottom" type="button" name="removeProfilePic" id="removeProfilePic" value="Remove Profile Picture"/></label>

    <hr class="divider" />
    
    <div> tes te ste te dttes fsds</div>

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

haku · December 17, 2008

Or you can just use the < hr> tag.

Dan06 · December 17, 2008

I tried the <hr> tag, but it too results in the same, ie

content

content

Seemingly, the source of the problem is the "clear" property. When I remove the clear property from my css, the horizontal line comes to the the right of my left floated object and I am able to use margin-top: 100px to push the line down to where I want it. But when I include the clear property, the horizontal line comes flush up to the bottom of the left floated object (see above quote example).

All I want, is a horizontal line that has a margin of 15px above and below the line. Suggestions?

xtopolis · December 17, 2008

can you show us your full code, as well as your css? It looks like you have something interfering elsewhere..?

Dan06 · December 17, 2008

The html for the document is:

<html>
<head>
</head>
<body>
<div id="contentContainer">

<ul class="tabNav">
    <li class="current"><a href="#">Basic</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Messages</a></li>
</ul>

<div class="tabContainer">

<div class="tab current">
    
    <fieldset class="profilePicture"><legend>Current Profile Picture</legend>
    	<div id="profileImg"></div>
    </fieldset>
    <br />
    <form name="profileImgForm" id="profileImgForm" enctype="multipart/form-data" method="post" action="image_upload.php" target="imgUploadFrame">
    <label class="label">Upload Picture:<br/>
    <input type="file" name="imgFile" id="imgFile" /><input type="submit" name="saveProfileImg" value="Save" /></label>
    </form><iframe name="imgUploadFrame" id="imgUploadFrame"></iframe><br />
    <label class="label">Click below to remove picture <br/>
    <input style="vertical-align:bottom" type="button" name="removeProfilePic" id="removeProfilePic" value="Remove Profile Picture"/></label>
    
  	<hr class="divider"/>
    <div id="editAddress"></div>
  
</div> // end current tab div

        <div class="tab">
	…Content for Tab 2…
</div>
<div class="tab">
	…Content for Tab 3…
</div>
<div class="tab">
	…Content for Tab 4…
</div>

</div>

</div>
<!-- end of #contentContainer -->
</body>
</html>

The tab css is:

ul.tabNav {float:left; list-style: none; width: 100%; border-bottom: 1px solid #FF6600; margin: 20px 0 0 0; padding:0;}
ul.tabNav li {border: 1px solid #FF6600; float: left; padding: 0; margin: 0 5px;  margin-bottom: -1px; }
ul.tabNav a {color: #333; display: block; padding: 10px; text-decoration: none; outline: 0;}
ul.tabNav li.current {border-bottom-color: #fff;}
ul.tabNav li.current a {background-color: #FF6600; color: #FFFFFF; text-decoration: underline; font-weight: bold;}

div.tabContainer { clear: both; float: left; width: 100%; margin-top: 20px; }
div.tabContainer div.tab { color: #000; display: none; }
div.tabContainer div.current { display: block; }
div.tab p:last-child { margin-bottom: 0; }

The css for the content inside the tab is:

.profilePicture{
width: 150px;
height: 165px;
}

.profilePicture legend{
color: #000066;
font-weight: bold;
}

.label {
font-weight: bold;
color: #000066;
}

div fieldset {
margin-left: 40px;
margin-right: 5px;
float: left;

.divider{
margin: 15px 0;
clear: left;
}

xtopolis · December 18, 2008

I think after all this, it's because your code is missing a brace:

div fieldset {
margin-left: 40px;
margin-right: 5px;
float: left;

missing a closing brace...

Otherwise having the <hr class="divider" />, and having the style hr.divider{margin: 15px 0;} seems to work.

Dan06 · December 18, 2008

First of all, thanks for taking the time to go through my code and helping to resolve the issue. In copying/pasting my code I missed the ending curly brace in my posting, but in my code I do have it. So, the closing brace is not the issue.

However, after reading your post,

Otherwise having the <hr class="divider" />, and having the style hr.divider{margin: 15px 0;} seems to work.

I thought I'd try another browser, so I opened my code in Internet Explorer, rather than firefox; and in IE the divider line works as intended. Do you know what could be causing firefox to display the <hr> tag flush to the bottom of the floated object rather than with a top AND bottom margin of 15px?

xtopolis · December 18, 2008

Take a look at what I see:

http://xtopolis.com/help/phpfreaks/divider/divider.jpg

This is with a margin: 25px 0; for emphasis.

I have the same code I used (copied from your post) here:

http://xtopolis.com/help/phpfreaks/divider/index.html

http://xtopolis.com/help/phpfreaks/divider/test.css

Dan06 · December 18, 2008

I've attached two images - one of the code in IE, the other in Firefox. Notice that in Firefox the dividerline is flush with the content above it.

Note: Firefox Version: 3.0.5, IE 7.0.5730.13

[attachment deleted by admin]

xtopolis · December 18, 2008

Heh, that sucks that it's doing that.

Post the code of that page with the 3 elements [just the generated HTML output] as well as the CSS and I'll take a look. It's hard to tell because the code you are looking at is different from the code you supplied to us.

bronzemonkey · December 19, 2008

This looks like it is related to you having all these elements floated. The margin is just disappearing behind the float. Try floating your dividing element too.

Dan06 · December 20, 2008

With the severe weather, this is the earliest I could post the code. Attached is the html and css code, which contains the issue.

While putting together the example page, I noticed that in my original css code posting I missed an important attribute from my code:

iframe{display:none;}

When this style attribute is applied to the page that is when the discrepancy with how firefox and IE displays the horizontal line occurs.

Note: I did try floating the divider line, but that made the divider line disappear.

[attachment deleted by admin]

bronzemonkey · December 21, 2008

Note: I did try floating the divider line, but that made the divider line disappear.

Did you set it's width to 100%

Dan06 · December 22, 2008

When I set the width to 100% the line appears, but the original problem persists.

bronzemonkey · December 22, 2008

Is that really your html? No DOCTYPE? iFrames?

Dan06 · December 23, 2008

Yes, what I attached back on Dec. 20th 5:40pm is really my HTML. What do you mean by?

Is that really your html?

No DOCTYPE?

There is a doctype (see attachment from Dec. 20th entitled "dividerline"):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I don't understand what you are asking by

iFrames?

sKunKbad · December 25, 2008

I'm just guessing that you need to declare

float:left, or float of some kind

Mikedean · December 25, 2008

Using the following will make it work in FF, however IE will be broken, so I suggest just having 2 CSS documents with the IE one being included using a CSS conditional statement

hr.divider{
position: relative;
top: 15px;
margin: 0 0 30px 0;
clear: left;
}

Sign In

Divider line

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information