Solved

Unexplained "gap" at top of main content

Posted on 2011-09-09
9
264 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
GET error with Font Awesome 3 51
Change color in a check box 8 36
toggle content 12 41
Displaying Text in Columns in HTML 3 32
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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