SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    P Margin-Bottom Adds a Horizontal Scrollbar?

    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. #2
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Ansel

  7. #7
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What?!? No reply from Paul the O'Biquitous Great?

  8. #8
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    who is Paul the O'Biquitous Great?

  9. #9
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A gentleman who kept finding my posts and selflessly fixing all of my mistakes.

    http://www.sitepoint.com/forums/members/paul-o-b/

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by open4biz View Post
    What?!? No reply from Paul the O'Biquitous Great?
    lol - Sorry I was out most of today but it seems you got sorted anyway

  11. #11
    SitePoint Enthusiast open4biz's Avatar
    Join Date
    Jan 2004
    Location
    San Diego
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *Phew* You had me worried.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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:

    Code:
    	<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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •