Need help with layout spacing please...

User 364143 Photo


Guest
5,410 posts

You're welcome. This is what I am seeing (attached).
Attachments:
CoffeeCup... Yeah, they are the best!
User 2076949 Photo


Registered User
34 posts

Oh, it definitely has more space when I look at it... and the menu in the bottom is centered vertically. Any idea why I would be seeing something different? I am previewing with IE.
User 364143 Photo


Guest
5,410 posts

Sorry, I couldn't begin to tell you. It looks just like that image when I open it in IE, FF, Chrome, Opera, and Safari.
CoffeeCup... Yeah, they are the best!
User 184085 Photo


Ambassador
1,707 posts

I get the same results as Tom, have you tried F5 in IE to force it to reload the page rather than read an old copy from the cache ?
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 117361 Photo


Ambassador
6,076 posts

Is it possible that there are some margins in the css that might be affecting the content in the sidebar?

#sidebar dl {
margin:0 0 10px;
padding:5px;
text-indent:0;
}
#sidebar dl dt {
font-size:13px;
font-weight:bold;
margin:0 0 5px;
}
#sidebar dl dd {
font-size:11px;
margin:0 0 10px 0;
}
#sidebar dl dd.read-more {
font-weight:bold;
text-align:right;
margin:0 0 8px 0;
}
#sidebar ul {
list-style: square;
margin:0 0 1em 2em;
padding:5px;

text-indent: 0;
}

I notice that the right hand column has <dl> and <dd> tags, so these extra margins are certainly going to make a difference. You might have to add some inline styling just for the final content to deal with this. Don't worry about the <dt> tags as they affect the title. It is the <dl> which possibly needs attention.

Try slipping this bit of code (ie.lastpost) into the css and play around with those 5px in the margin to see what works best for you. I also see the <dl> has a 10px bottom margin which will make a difference. Try changing that also. I suggest you try that first, and if it works for you, don't bother adding the other code for the <dd>

#sidebar dl {
margin:0 0 10px;
padding:5px;
text-indent:0;
}
#sidebar dl dt {
font-size:13px;
font-weight:bold;
margin:0 0 5px;
}
#sidebar dl dd {
font-size:11px;
margin:0 0 10px 0;
}
#sidebar dl dd.lastpost {
margin:0 0 5px 0;
}



and try adding this inline style to the last post only in your right column on the html page if changing the <dl> margin has made no difference:
<dd class="lastpost">For over 60 years, the CDC has been dedicated to protecting health and promoting quality of life through the prevention and control of disease, injury, and disability.</dd>

See if that helps at all.
User 2076949 Photo


Registered User
34 posts

Thank you all for your help! Janys, I made the changes you suggested and it did help a bit. Then I noticed that there was a huge margin in my .module class, and when I got rid of that, the problem was gone!

Thank you for helping me understand what to look for- I really appreciate it!
User 2076949 Photo


Registered User
34 posts

I have another question!

Is there a more graceful way to add one line of vertical space *in the HTML code* (not on the css sheet) between two lines of text, besides using "<br><br>"?

Thank you!
User 364143 Photo


Guest
5,410 posts

<p style="margin-top:100px;">hello world</p>
CoffeeCup... Yeah, they are the best!
User 2076949 Photo


Registered User
34 posts

Awesome. Thank you!
User 364143 Photo


Guest
5,410 posts

You're welcome. :)

FYI: Inline styles, like that example, override the css style sheet.
CoffeeCup... Yeah, they are the best!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.