P Margin-Bottom Adds a Horizontal Scrollbar?

HTML & CSS
1

Hi All,

On this page:

ASuiteWeek.com v2.0 | Development Site

When I add this CSS rule:

p {
margin-bottom:1.5em;
}

A horizontal scrollbar appears at the bottom.

Any idea why this is occuring? Perhaps a overflow tag somewhere might help?

Is there a better way to space out my paragraphs?

Thanks!

Ansel

2

margin-left:890 for class content_slider_wrapper is generating overflow. You can try overflow:hidden on this element or parent id #content_slider_wrapper
will work.

By the way i think it horizontal bar does not related with any css of paragraph

3

Thanks. I’ll try that right now. I noticed that it’s only hiccuping on the welcome.asp page, which suggests it may have something to do with the content slider…

Thanks,

Ansel

4

Did you mean .rotate_slide_button_container?

I show this:

.rotate_slide_button_container {float:left;position:relative;margin-left:890px;width:100%;z-index:15;}

That is CSS to move some slide-switching buttons into place. I don’t believe it effects the layout as it stays within the confines of the content slider. I do not see the markup you mentioned for .content_slider_wrapper.

When I remove that P tag CSS, the horizontal scrollbar goes away… is that just coincidence?

Thanks,

Ansel

5

Hi ,
Sorry my back its a div.
there is div with id “content_slider_wrapper” . Add overflow:hidden on this. And i tried removing css on p tag but it still gives me horizontal scroll bar. Just let me know which browser you are using. so i can match your issue.

I am looking on this url ASuiteWeek.com v2.0 | Development Site. IN firefox.

6

Hi Tejash,

I’m sorry, you were right. It was NOT related to the p-tag. I must have changed something else in the CSS that triggered the horizontal scrollbar. I thought I had observed changing that one tag and witnessing the appearance of the scrollbar.

You were also right on the overflow:hidden tag. I added it to content_slider_wrapper and that took care of it.

Thank you :slight_smile:

Ansel

7

What?!? No reply from Paul the O’Biquitous Great?

8

who is Paul the O’Biquitous Great?

9

A gentleman who kept finding my posts and selflessly fixing all of my mistakes.

10

lol - Sorry I was out most of today but it seems you got sorted anyway :slight_smile:

11

Phew You had me worried. :smiley:

12

Some other advice on your page…

Your comment placement AFTER the closing tags is prone to generating rendering bugs in IE and FF – move those BEFORE the tag and end of problem.

For example change:
</div> <!-- id=“contentwrapper” –>

To
<!-- #contentWrapper –></div>

It’s stupid, but it prevents IE and some builds of FF from wigging out.

In general you’re knee deep in unnecessary markup and stuff that has NO BUSINESS in the markup in the first place. This is evident in the ungodly 27k of markup to deliver 863 BYTES of content…

some of it is just outdated redundancy:

<a name=“top”></a>
<div id=“topsection”>

Unless you still support Netscape 4, there’s no reason for that – just make the DIV’s id be “top”. NOT that you are doing ANYTHING up there which warrants that much markup… and how you’re doing it provides zero graceful degradation on a page with nonsensical/nonexistant headings… Your H1 being in the slider… making every other heading on the page a subsection of that.

I mean this:


<div id="maincontainer">
	
<a name="top"></a>
<div id="topsection">
	<div id="topsection_leftcolumn" class="topsection_leftcolumn">	
		<div id="topsection_centerarea_container"  class="topsection_leftcolumn_container">
			
		</div>	<!-- topsection_centerarea_container -->
	</div>	<!-- topsection_leftcolumn -->
	
	<div id="topsection_centercolumn" class="topsection_centercolumn">
		<div id="topsection_centerarea_container" class="topsection_centerarea_container">
<!--			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	-->
			
			
		</div>	<!-- topsection_centerarea_container -->
	</div>	<!-- topsection_leftcolumn -->
	
	<div id="topsection_rightcolumn" class="topsection_rightcolumn">
		<div id="topsection_rightcolumn_container"  class="topsection_rightcolumn_container">
			
		</div>	<!-- topsection_centerarea_container -->
	</div>	<!-- topsection_leftcolumn -->

</div>

Is one HELL of a mess for what I’d probably have coded as:


	<h1>
		<span>A Suite Week</span><br />
		<small>Condos, Suites and Resorts Worldwide</small>
		<b></b>
	</h1>

Since it helps to keep people viewing pages without images happy too. Of course this is just me, but I’d be swinging a giant axe at that bandwidth wasting “gee aint it neat” alternating banner crap too since it pushes anything resembling content too far down the page… but then I’ve never understood the appeal of that stuff on websites as a developer OR as a user… Especially given how badly it degrades when scripting is disabled.

I mean, you’re up to THREE QUARTERS OF A MEGABYTE to deliver less than 1k of plaintext – HELLO BOUNCE RATE. This is what I’m usually talking about around here with “very pretty and ultimately useless” – in scripting ALONE you’re 35k larger than the upper limit I would ever allow for EVERYTHING (HTML+CSS+IMAGES+SCRIPTS) in a single page on a website, and more than double my usual target!

Those of you out there who keep asking what I have against jquery? Well THERE IT IS!

… and that’s before we talk the accessibility failings of the fixed metric (aka px) fonts in the content area and footer text color contrasts below accessibility norms.