/    Sign up×
Community /Pin to ProfileBookmark

div height/overlap problem

Copy linkTweet thisAlerts:
Mar 01.2007

[url=”http://apps.cpe.ky.gov/temp_docs/prototypes/kyvc/new.htm”]link[/url]

Please view this page in Fx, then in IE.

A few problems:
– the alignment is off for the middle navigation pane. I have a specific height and zero margin set, but it seems that the top margin is being interpreted as a negative number, causing the navigation pane to be placed under the banner
– the bottom (image-created) border is not in the same place (it’s slightly lower in IE)
– the “tail” of the “p” does not overlap the white text box

I’m guessing that all of these symptoms are related, but I can’t figure out what the problem is. Could someone with please look at this with a fresh outlook and see if they can figure out the issue here?

Thanks,
KDLA

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelMar 01.2007 — Okay, -I'm seeing something strange here... -what is this?#banner {

display: block;

margin: 0; padding: 0;

height: 55px;

color: #cdc8bc; background: #251930 url([B]images/border.gif)[/B] repeat-x bottom;

z-index: 1000;}[/QUOTE] (I made the path "absolute" to work for me offline/desktop).

If this is an image, wouldn't it be "inside" the DIV "#banner". But if you wanted a border, -why not use [I]border-bottom:8px solid color[/I]? In my editor, if I ''comment out' the image URL, I can see the 'tails' of the letters that extend below baseline. [I]With[/I] the image, -they are occluded. ?

I see several instances of "margin: 0; padding: 0;" used throughout, so this must be important. -Why not use " * { margin: 0; padding:0; } " as the first CSS rule, thus zero-ing out margins & paddings, and only state them if they are positive integers. I see that this navigation block sits about 6 pixels too far to the right in IE, and in Firefox, aligns nicely with the right-hand column forming a clean intersection. ?

-I'm still studying this as I am sure that I have not addressed the problem yet. ?

I might also add:

#text ul li {list-style-type:none;}

to remove those bullets from the <li> in the DIV "#text", which are just barely visible on top of that brown border. -You know, -this might be a oadding issue here. IE assumes a 20-px 'padding' on list-items that needs to be dealt with. Declaring "display:inline;" on the [B]#text ul[/B] removes this issue (and the bullets), but it messes-up the way the text will be displayed. -I wonder if "display:inline-block;" will service this?...
Copy linkTweet thisAlerts:
@KDLAauthorMar 01.2007 — (Sorry -- I needed to remove that link -- that has our agency name in it ? )

IE didn't like my border-bottom -- the text didn't overlap the line; the border's start point was determined by the lowest point in the text: the tail of the "y".

I list everything in my CSS, style-by-style; it's just habit. That's the only reason for the multiple instances.
Copy linkTweet thisAlerts:
@WebJoelMar 01.2007 — (Sorry -- I needed to remove that link -- that has our agency name in it ? )

IE didn't like my border-bottom -- the text didn't overlap the line; the border's start point was determined by the lowest point in the text: the tail of the "y".

I list everything in my CSS, style-by-style; it's just habit. That's the only reason for the multiple instances.[/QUOTE]
Okay, -explains that. Yes, -I often over-write everything too then condence it later.

You might need to state a width here, -the blue border that I added showed that this was unnecessarily expanding the container. The reduced width helps (remove the blue border, of course: )

#nav ul li form .row {

display: block;

[B]width:170px;[/B] /* I added this */

margin: 4px 0;

border:1px solid blue;} /* border added to show result. remove width:170px and container 'expands' several pixels */
Copy linkTweet thisAlerts:
@WebJoelMar 01.2007 — To get a nice 'overlap' of the header text, -how about this:

CSS:
#banner {

[B]position:relative;[/B]

display: block;

height: 55px;

color: #cdc8bc; background: #251930 url(http://apps.cpe.ky.gov/temp_docs/prototypes/kyvc/images/border.gif) repeat-x bottom;

z-index: 1000;}
[/QUOTE]
HTML:
<h1 [B]style="position:absolute; bottom:-8px;"[/B]>Kentucky Virtual Campus</h1>[/QUOTE]

this seems to quite effectively put the H1 text "Kentucky Virtual Campus" 'overtop' of everything and you no longer need the z-index:1000 (which seemed to not be effective)...
×

Success!

Help @KDLA spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...