Jump to content

Divider line

Dan06

By Dan06
in CSS Help

 Share

Recommended Posts

Dan06 Member

Dan06

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

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;

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-716995
Share on other sites
Dan06 Member

Dan06

Posted
  • Author
Posted

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>

 

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-717165
Share on other sites
xtopolis Member

xtopolis

Posted
Posted

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>

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-717365
Share on other sites
Dan06 Member

Dan06

Posted
  • Author
Posted

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?

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-717961
Share on other sites
Dan06 Member

Dan06

Posted
  • Author
Posted

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;
}

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-718006
Share on other sites
xtopolis Member

xtopolis

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-718568
Share on other sites
Dan06 Member

Dan06

Posted
  • Author
Posted

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?

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-718873
Share on other sites
xtopolis Member

xtopolis

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-719128
Share on other sites
xtopolis Member

xtopolis

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-719225
Share on other sites
Dan06 Member

Dan06

Posted
  • Author
Posted

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]

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-720481
Share on other sites
Dan06 Member

Dan06

Posted
  • Author
Posted

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?
Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-722523
Share on other sites
Mikedean Newbie

Mikedean

Posted
Posted

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;
}

 

Link to comment
https://forums.phpfreaks.com/topic/137237-divider-line/#findComment-723670
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.