Solved

Unexplained "gap" at top of main content

Posted on 2011-09-09
9
257 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: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
 
LVL 3

Assisted Solution

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

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



please try, and check.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
erros on link  checking 2 42
Firefox Display problems 5 41
Urgent Help with HTML CSS Positioning 9 20
Wordpress CSS Link Issue 2 13
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…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

707 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now