New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

CSS margin only applies to first line?


Post Reply New Thread Subscribe

 
Thread Tools
Morgan19

 
Member Since: Apr 08, 2004
Posts: 129
Morgan19 is on a distinguished road

Morgan19 is offline
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. 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
QUOTE Thanks
Murlyn

 
Murlyn's Avatar
 
Member Since: Jun 11, 2003
Location: Mount Vernon, WA
Posts: 4,909
Murlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to all
Mac Specs: MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2

Murlyn is offline
Try setting the style's border color so that you can see the dimension of the box, it makes it a little bit easier to work with
QUOTE Thanks
Morgan19

 
Member Since: Apr 08, 2004
Posts: 129
Morgan19 is on a distinguished road

Morgan19 is offline
I'm not sure that really accomplishes anything, though. It might make things more visible, but it still doesn't fix the fact that only the first line is taking the padding. Speaking of which, a member on another forum suggested I use padding instead of margin in the style. I made the switch but so far the subsequent lines of text still aren't being pushed to the right properly.

This is the 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 navigational include that's being pulled into the main page:

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</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 main page itself:

Code:
<!--#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"-->
I've also tried creating a new HTML page from scratch (outside of what I'm working on now), setting up a basic style that has a 13 pixel padding on the left, and the padding works fine. It's when I try and do the same thing on the page or include (per above) that it starts acting up, and I'm not sure why.

m19
QUOTE Thanks
Morgan19

 
Member Since: Apr 08, 2004
Posts: 129
Morgan19 is on a distinguished road

Morgan19 is offline
Got it. The padding was being applied to the A elemenets; I just needed to create a separate style for just the P elements and it's working great now.

m19
QUOTE Thanks
Murlyn

 
Murlyn's Avatar
 
Member Since: Jun 11, 2003
Location: Mount Vernon, WA
Posts: 4,909
Murlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to allMurlyn is a name known to all
Mac Specs: MacBook Pro 2.6 GHz Core 2 Duo 4GB RAM OS 10.5.2

Murlyn is offline
Yep, the reason I said what I did was so that you could actually see it and then play around with it. Also instead of applying the padding element to the <p> tags, you could make a surrounding <div> tag that goes around all of it and you just apply it to that div tag, then make the <p> tags just the style that you want visually.
QUOTE Thanks

Post Reply New Thread Subscribe


« Problems uploading with MAC IE. | Interarchy 7.3 »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
Line In on new Powerbook G4 not working. Ilnyckyj Switcher Hangout 15 07-11-2005 12:24 PM
What is the Mac Equivalent of "Shift+End" to Highlight an Entire Line? GTwinkie Switcher Hangout 2 02-21-2005 07:08 AM
My first tableless CSS layout ChicoWeb Web Design and Hosting 17 01-18-2005 02:57 PM
Image placement with CSS dziner Web Design and Hosting 5 08-12-2004 08:38 PM
CSS strangeness in Safari only!? stevenjohn Web Design and Hosting 1 03-29-2004 07:08 AM

All times are GMT -4. The time now is 02:39 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?