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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS margin only applies to first line? 2

Status
Not open for further replies.
Morgan19

Morgan19

IS-IT--Management
Aug 9, 2002
94
US
I've created a text style, using CSS, with a margin of 15 pixels on the left side. It works great on the first line and the text is bumped out by 15 pixels, but as soon as the text wraps to the second or later lines, it's back flush with the side of the cell again as if there was no 15 pixel margin. The same thing happens if I do a soft return to create a line break.

What am I missing here? This is for some sidebar navigation. so it looks pretty goofy when the first line of a navigation option is indented nicely but then jumps back to the left when it flows to the next line...

m19
 
Sort by date Sort by votes
I forgot to actually ask my question: I'd like the 15 pixel margin on the left to apply to everything set to that certain style, not just the first line...

m19
 
Upvote 0 Downvote
you may also need to use a block element rather than an inline element. try a div or a paragraph, or force your element to be block by speciying [tt]display: block;[/tt] in its CSS.



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Erm... a copy of your code? Hard to tell what you're doing wrong otherwise.
Click to expand...

What exactly do you need? I would've posted a link to the page itself but it's still in development and confidential.

sounds like you should be using padding rather than margin.
Click to expand...

I tried changing it to padding instead and it still acts the same. The first line of text bumps out but all other soft line breaks or soft returns flush back to the left.

This is the CSS style:

Code: 
.sub_sidenav2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: 565555;
	text-transform: uppercase;
	text-decoration: none;
	padding-left: 13px;
}

This is the navigation include:

Code: 
<!-- BEGIN nav_Left_Careers.inc.htm -->
<link href="styles.css" rel="stylesheet" type="text/css">

<p><img src="images/nortel_arrow.gif" width="14" height="10"><span class="sub_sidenav1"><a href="careers.shtml" class="sub_sidenav1">Careers</a></span></p>
<p><a href="benefits.shtml" class="sub_sidenav2">Benefits</a></p>
<p><a href="jobopenings.shtml" class="sub_sidenav2">Job Openings</a></p>
<p><a href="inteljobopenings.shtml" class="sub_sidenav2">Intel Job Openings</a></p>
<p><a href="topten.shtml" class="sub_sidenav2">Top 10 Reasons to Work at NGS</a></p>
<p><a href="corporateculture.shtml" class="sub_sidenav2">Staff &amp; Corporate Culture</a></p>
    <p><a href="recruitingevents.shtml" class="sub_sidenav2">Recruiting Events</a></p>
    <p><a href="eeoaastatement.shtml" class="sub_sidenav2">EEO/AA Statement</a></p>
    <p>&nbsp;</p>
    <!-- END nav_Left_Careers.inc.htm -->

And this is the page that the navigational include is being pulled into:

<!--#include file="PageTop.inc.htm"-->
<body bgcolor="#ffffff">
<script language="JavaScript">document.sSect='Car';</script>
<table border="0" cellpadding="0" cellspacing="0" width="747px">
<tr><td width="173"></td><td width="400"></td><td width="174"></td></tr>

<tr><td colspan="3"><a href="index.shtml"><img name="help_header1" src="images/careers_header1.jpg" width="465" height="96" border="0"></a><img name="help_header2" src="images/careers_header2.jpg" width="184" height="96" border="0" alt=""><img name="help_header3" src="images/careers_header3.jpg" width="97" height="96" border="0"></td>
</tr>

<!--#include file="nav_Top.inc.htm" -->

<tr>
<td colspan="3" height="25" bgcolor="#606060" align="left" valign="middle" bgcolor="606060" class="sub_breadcrumb" style="padding-left: 17px;">breadcrumb &gt; breadcrumb &gt; breadcrumb</td>
</tr>

<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding-left:15px;padding-top:29px;"><!--#include file="nav_Left_Careers.inc.htm"--></td>
<td valign="top" width="400"><img name="sub_p_example" src="images/sub_p_example.jpg" width="400" height="170" border="0" alt="">


<!-- BEGIN Main Content -->

<p class="sub_text">Aenean quam est, egestas ac, gravida sed, blandit nec, neque. Cras ipsum nibh, accumsan nec, volutpat quis, laoreet soles, nibh. Pellen tesque iaculis erat scelerisque libero. Fusce nunc porttitor lectus eu ipsum. Etiam ac ante a turpis dignissim ullamcorper. Nam mi risus, accumsan id, imperdiet a, tempo lacus. Sed hendrerit lorem. Duis vel turpis vitae mauris aliquet tempus. Donec tellus ipsum, euismod sed, porttitor vel, hend rerit vitae, odio. Sed sollicitudin nisl ac dui. In hac habitasse platea dictumst. Vestibulum placerat vehicula nunc.</p>

<!-- END Main Content -->
<br clear="all" />
</td>
<td rowspan="4" valign="top" bgcolor="#D9D9D9" style="padding-left:15px;padding-top:29px;">

<!-- BEGIN Right Bar Content -->

<p class="index_sidebar_link2"><img src="images/arrow.gif" width="14" height="10"><span class="careers_sidebar_link2">link</span><br />
<img src="images/arrow.gif" width="14" height="10"><span class="careers_sidebar_link2">link</span></p>
<p class="index_sidebar_link1">&gt; <span class="careers_sidebar_link1">link</span><br>
&gt; <span class="careers_sidebar_link1">link</span></p>

<!-- END Right Bar Content -->
</td>
</tr>

<!--#include file="PageBottom.inc.htm"-->
Click to expand...

The frustrating thing is that I've tried creating a new HTML page, setting up a basic style that has 13 pixel padding on the left, and the padding works fine. It's when it gets pulled into the page or include (per above) that it starts acting up.

m19
 
Upvote 0 Downvote
Create another class-based style rule for the P elements, which has only the margin / padding in it, and remove it from the sub_sidenav2 rule. Then give the P elements that class.

Sorry - I assumed that since you already had a class and HTML in place you knew all of this.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I'm grateful for those who helped, the problem's now solved.

Thanks.
m19
 
Upvote 0 Downvote
Morgan19, you can organise your links more neatly if you mark them up as a list. That's even more true if they're i some kind of hierarchy (as appears to be the case from the snippet you gave). Try marking it up like this:
Code: 
<ul class="nav">
  <li><a href="careers.shtml">Careers</a>
    <ul>
      <li><a href="benefits.shtml">Benefits</a></li>
      <li><a href="jobopenings.shtml">Job Openings</a></li>
      <li><a href="inteljobopenings.shtml">Intel Job Openings</a></li>
      <li><a href="topten.shtml">Top 10 Reasons to Work at NGS</a></li>
      <li><a href="corporateculture.shtml">Staff &amp; Corporate Culture</a></li>
      <li><a href="recruitingevents.shtml">Recruiting Events</a></li>
      <li><a href="eeoaastatement.shtml">EEO/AA Statement</a></li>
    </ul>
  </li>
  <li><a href="another.shtml">Another Heading</a>
    <ul>
      <li><a href="sub.shtml">Another subhead</a></li>
    </ul>
  </li>
</ul>
If you view that without any styling, you'll see it looks fairly tidy. Applying some CSS will get it looking how you want it:
Code: 
   ul.nav {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   ul.nav ul {
      list-style: none;
      margin: 0;
      padding: 0 0 0 13px;
   }

   ul.nav li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: 565555;
    text-transform: uppercase;
    text-decoration: none;
  }
That makes a couple of assumptions about what you want, but even if they're wrong it illustrates a general principal: You only need a class on the top-level element, the other properties can be given out using CSS rules. As a rule of thumb, if you find yourself applying a CSS class to a succession of adjacent elements, you're doing something wrong.

Hopefully the above code will give you something to tinker with.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
787
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
737
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
623
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top