Solved

Unexplained "gap" at top of main content

Posted on 2011-09-09
9
262 Views
Last Modified: 2012-05-12
I've been staring at this for a while in Mozilla / using Firebug to try and find some sort of margin or padding value to explain the gap, and I just can't find what is wrong.  Another pair of eyes would be nice to have on this.

Website is here:

http://utenn.dev.campuswebstore.mobi/booksearch.aspx

it does it here as well:

http://utenn.dev.campuswebstore.mobi

but the gap is not as tall.  Actually, I just checked and the gap is not there in Mozilla...your mileage may vary.




(see screenshot)

 why gap
0
Comment
Question by:Tom Knowlton
9 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 36514313
Why, it's the Cumberland Gap ;-)
0
 
LVL 29

Accepted Solution

by:
Badotz earned 425 total points
ID: 36514330
Not sure why you have <script></script> tags all over the place - in the <head> and <body> sections?

Your ID attributes are unusual, too, not what I would call "concise"...

You might try putting

* { margin:0; padding:0; }

in your CSS file
0
 
LVL 17

Assisted Solution

by:OmniUnlimited
OmniUnlimited earned 25 total points
ID: 36515157
On http://utenn.dev.campuswebstore.mobi/booksearch.aspx, I see you are experiencing this problem because of the way you have set up the DOM.  You should try to use position: absolute and position: relative only if absolutely necessary.  As it is right now, without radical changes in the DOM, I would recommend changing top to -15px on the div#side_menu_bg style found on line 507 of the utenn.css file (a bandaid measure I admit, but the least work of all the solutions possible).

I cannot see any problem with the http://utenn.dev.campuswebstore.mobi/ page.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Assisted Solution

by:Prafulla Maharjan
Prafulla Maharjan earned 25 total points
ID: 36515464
in the style sheet

body{margin:0px;padding:0px}



please try, and check.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 36515837
@prafullamjn: Did you not read my post http:#a36514330?
0
 
LVL 8

Assisted Solution

by:PagodNaUtak
PagodNaUtak earned 25 total points
ID: 36520469
Add the below style in your utenn.css

Cheers!

Jehova is great!
DIV#inner_wrapper{
display:inline;
}

DIV#inner_content{
Display:inline;
}

DIV#side_menu_bg{
position:static;
}

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36523634
It was:

#content h3 { /* Use this class for a in-page menu header */
    font-size: 14px;
    line-height: 15px;
    margin: 15px 10px 7.72px;
    color: #1C3F6B;
    font-family: "trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-weight: lighter;
}

Open in new window



Changed:

   margin: 15px 10px 7.72px;
 

to this:

   margin: 0px 10px 7.72px;
 


and that seemed to do it.



Rebuttal?  :P
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36523661
Thanks for the brainstorming and for the time spent on this.

Tom
0
 
LVL 29

Expert Comment

by:Badotz
ID: 36526725
You changed the TOP margin from 15px to 0 - seems like that was a good idea ;-)

Oh, and no worries - glad to help.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Box Locations 6 25
bootstrap wrap text 1 30
CSS Style on Chrome 1 33
Word Press Fixes to Google Speed Test Issues 2 16
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question