Forum Moderators: not2easy
But, on all IE browsers it does not render correctly.
a. blog title - the fonts are cut off on the bottom
b. nav bar not displaying correctly
otherwise everything else seems fine.
Here is my css code for this site:
-------------------------------------------------------
side note: If I add this to the css at the top of the page
than the blog title problem is fixed and the nav bar becomes better but only 1 nav link displays instead of all of them. And you can see as the page loads the old incorrect buggy display shows in the background till the page fully loads. AND a white border displays all around the website and than the black border.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
----------------------------------------------------------
body { margin:1px; font-size:0.8em; line-height:16px; background-color:#000000; font-family: "Trebuchet MS", "Myriad Pro", Arial;}
a { color:#000000;}
a:hover { text-decoration:none;}
#container { background: url(images/) 0 50px #000000;}
#header { background: url(images/header.jpg; ) #000000; }
#logo { padding:20px 50px 15px 25px; text-align:left; }
#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:36px; font-size:30px; text-transform:uppercase;float:right}
#logo a:hover { }
#menu { background:#000000; width:900px; margin:0 auto; height:32px; margin-top:47px;}
#menu ul { margin:0; padding:0;}
#menu ul li{ display:inline-block; float:none; width:100px; list-style:none; text-align:center; height:32px;}
#menu a { display:block; float:left; width:100px; color:#FFFFFF; font-size:14px; font-weight:normal; text-decoration:none; padding-top:8px;}
#menu a:hover{ background: #FFFFFF; padding-top:8px; height:24px; color:#000000}
#main { width:100%;}
#content { margin:7px; padding:0px; width:875px; padding:10px 50px 50px 50px; color:#ffffff; background:#000000; background-image: url(images/gradient.jpg); background-repeat: repeat-x}
#content h1 { padding: 30px 0 15px 0; margin:0; text-transform:uppercase; font-size:1.5em; color:#ffffff; width:150px; padding:5px; margin-top:20px;}
#content h2 { margin: 30px 0 10px 0; text-transform:uppercase; font-size:1.5em; color:#000000; background:#ffffff; width:950px; padding:5px; margin-top:20px;}
#content h2 a { color:#ffffff; text-decoration: none;}
#content h2 a:hover { color:#ffffff;}
#content p { padding:0 0 5px 0;}
.entry p { margin: 10px 0 0 0;}
.date {float:right; font-size:11px;}
#footer {background:url(images/) repeat-x #000000 0 2px; height:100px; border-top:2px solid #000000;}
#left_footer { float:left; padding:40px 0 0 30px; text-transform:uppercase; color:#000000; font-weight:bold; font-size:11px;}
#left_footer a { color:#FFFFFF;}
#right_footer { float:right; padding:40px 30px 0 0; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px; text-align:right;}
#right_footer a { color:#FFFFFF;}
.navigation { text-transform:uppercase; font-size:11px; margin-top: 20px; color:#ffffff; background:#000000; width:750px; margin-top:20px; padding:0 5px 0 5px;}
.navigation a {color:#ffffff; text-decoration:none; font-weight:bold;}
.navigation a:hover {color:#193441;}
blockquote { font-style:italic; border-left:3px solid #D1DBBD; padding-left: 5px; margin-left: 20px;}
code { line-height:normal; font-size:12px;}
thanks in advance for any assistance
summarised HTML added
<body><div id="container">
<!-- header -->
<div id="header">
<div id="logo"><a href="#">Custom Home Builder</a></div>
<center>
<div id="menu">
<ul>
<li><a href="#" title="Home">Welcome</a></li>
<li class="page_item page-item-44"><a href="#" title="About Us">About Us</a></li>
<li class="page_item page-item-115"><a href="#" title="For Sale">For Sale</a></li>
<li class="page_item page-item-3"><a href="#" title="Our Homes">Our Homes</a></li>
<li class="page_item page-item-111 current_page_item"><a href="#" title="Welcome">Welcome</a></li>
<li class="page_item page-item-11"><a href="#" title="Available">Available</a></li>
<li class="page_item page-item-15"><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
</center>
</div>
<!--end header --><!-- main -->
<div id="main"><div id="content"><h1>Main Content</h1></div></div>
<!-- end main --><!-- footer -->
<div id="footer">footer</div>
<!-- end footer --></div>
</body>
[edited by: SuzyUK at 9:33 am (utc) on Aug. 27, 2008]
[edit reason] specifics removed per TOS, HTML added [/edit]
If your navbar is OK in FF are you using FF3? It wasn't OK for me ;) - display: inline-block doesn't have support prior to that.. also while IE does support inline-block it doesn't support it on natural block level elements unless you hack a fix to encourage it. So to get the required look x-browser I would make the li elements display: inline; to save resorting to hacks for this job.
This will mean that you cannot give the width and height to the <li> (inline elements can't be dimensioned), but you can put the dimensions on your block level <a>nchors instead. This will also mean your links will not center in the navbar.. but as you have 7 (or I think there was 8) links in the navbar at 100px wide you can dimension the <ul> and center it achieving the same effect.
#menu ul {
width: 700px; /* 100px x # of links */
margin: 0 auto; /* center */
padding:0;
list-style: none;
text-align: center;
}
#menu ul li{ display:inline;}#menu a {
float:left;
width:100px;
line-height: 32px;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
}#menu a:hover{
background: #FFFFFF;
color:#000000;
}
I made some other changes to the rules above too, just to optimise the CSS and remove unnecessary rules, e.g. you don't need to declare
display: blockhope that helps with one of your questions
Suzy
I have another question to ask about css and not sure if I can add it to this reply or should start another thread.
The question is the 'blog title'. When viewing it on IE the bottom several pixels of the title are chopped off. You see most of the Blog Title Text except at the bottom of the letters. With FF it seems fine.
Any ideas on how that is fixed in CSS?
The question is the 'blog title'. When viewing it on IE the bottom several pixels of the title are chopped off. You see most of the Blog Title Text except at the bottom of the letters. With FF it seems fine.
Did you mean bottom crop - or top? (On my screen it is the top.)
Add
line-height:36px;
to
#logo a {
...
}
I changed to 36 and same result.
But, I do see what you mean about it being cut off at the top.
On my monitor using IE7 it also cuts off at bottom.
On IE6 it only cuts it off on the top. Are you using IE6?
Regards,
I checked on IE6 and most of the nav bar appears. But, the last link
'available' repeats itself as text only on below the navbar and contact also repeats itself.
But, what is also happening is if you highlight your mouse over the links they dissappear or if you place cursor over body than links dissappear in the nav bar. than the little error screen pops up if we want to send MS this error that is happening.
Summary: IE7 is now working but buggy on IE6
IE5.5 also works.
On IE6 it only cuts it off on the top. Are you using IE6?
But, what is also happening is if you highlight your mouse over the links they dissappear or if you place cursor over body than links dissappear in the nav bar. than the little error screen pops up if we want to send MS this error that is happening.
Not seen by me before as the report was of a cropped header so I used the provided code. After reading your fuller explanantion and changing the foreground and background colours in your css I've reproduced the issue.
Search on "creeping text", "link hover jump" and "repeated links" (or variation) for causes and cures.
edit to add comment: ie5.5 - Good on you! (and ie6 will come into line.
If you've searched you will know there are plenty of ways to cure this, so the suggested adjustments to your code are just one.
To center the menu and stop "jumping"
# In your xhtml remove the <center> wrapping div#menu
# In the head add this conditional comment to send a new width to ie6 to stop link wrap
<!--[if lte IE 6 ]>
<style type="text/css">
#menu ul {width:710px;}</style>
<![endif]-->
Note it is a tiny adjustment and barely noticeable - you may wish to just adjust the width of #menu ul to width:710px in your css and be done with it
# In your css add text-align:center to #menu after the line margin: 0 auto;
To stop the bottom of logo text being cropped
# In your css, add clear:both to #menu
# In your css adjust #menu margin-top:47px until you have the desired clearance
This fixes all the issues I was able to reproduce.
Here are my results.
Removed <center> from xhtml
Added conditional comment so my header files has:
<?php wp_head(); ?>
<!--[if lte IE 6 ]>
<style type="text/css">
#menu ul {width:900px;}</style>
<![endif]-->
</head>
Than added text-align:center to #menu
results: the menu does not bounce around any longer on IE6. Problem solved. However, by removing the <center> the nav bar is no longer centered. Any thoughts?
Any thoughts?
Avoiding loss of centering was the reason for setting width on #menu ul to 710px, not 900px (which has already been set on div#menu in the css)
If you must apply 900px to #menu ul for ie6, and <center> works - and you don't mind using it, then use it.
Otherwise post the css you are currently using for the menu (#menu, #menu ul, #menu ul li, #menu a, #menu a:hover)
(Just a check renet, you are using the correct doctype and validating your css and html aren't you?)
[edited by: alt131 at 9:00 pm (utc) on Aug. 28, 2008]
However, when I did 710 on FF it dropped 'contact' to a position below the nav bar and on IE7 it just dropped it altogether so I increased it to 810 and have the results as per opening sentence.
I tried putting the center code back into the header and it does not any longer cause it to center for IE6. Here is the header code:
--------------
<!-- header -->
<center><div id="header">
<div id="logo"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></div>
<div id="menu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>/" title="Home">Welcome</a></li>
<?php wp_list_pages('title_li=&depth=1' ); ?>
</ul>
</div></center>
</div>
<!--end header -->
---------------------
Now, here is the css code for menu
----------------------
#menu { background:#000000; width:900px; margin:1px auto; height:32px; margin-top:47px; clear:both}
#menu ul {
width: 810px; /* 100px x # of links */
margin: 0 auto; /* center */
padding:0;
list-style: none;
text-align: center;
}
#menu ul li{ display:inline;}
#menu a {
float:left;
width:100px;
line-height: 32px;
color:#FFFFFF;
font-size:14px;
text-decoration:none;
}
#menu a:hover{
background: #FFFFFF;
color:#000000;
}
Regards
Validating helps pick up basic errors:
<center><!--opens before header-->
<div id="header">
<div id="logo"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></div>
<div id="menu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>/" title="Home">Welcome</a></li>
<?php wp_list_pages('title_li=&depth=1' ); ?>
</ul>
</div></center> <!--closes before header-->
</div> <!--close center here -->
You didn't specify what you mean by "still incorrect in IE6", but if you haven't used a doctype the "menubar" will be off to the left. Place this at the very top of your page, right before head:
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
If you don't know why a doctype is important, check out the library here and over in html for relevant threads.
Once you have a doctype, things should settle down, and there should be no reason to use center.
Your styles look fine, bar the width issue, so in your style sheet:
#menu ul {
width:700px; /*This was working in SuzyUKs original code. It should still work fine at either 700 or 710px. Fingers crossed*/
margin: 0 auto;
padding:0;
list-style: none;
text-align: center;
}
In your document, right before the end of the head section
<!--[if lte IE 6 ]>
<style type="text/css">
#menu ul {
width:710px;
}
</style>
<![endif]-->
</head>
If things are still not working after you have checked your doctype and validated the xhtml and css, please stick with it and post back with exactly what the error is. (This helps avoid wild guesses - I can only cross my fingers some of this will help)
Validate and stick with it - this is quite sophisticated if you have just started - and are bothering to check as many browsers and back to ie5.5. You really are sooooo close
Now that I have gone thru this whole excercise I realize a big boo boo that I made. I forgot to include the header.jpg...
This header.jpg resides in the upper left corner of the header area of site. The jpg size is such that it touches the top of the header and goes all the way to the bottom of header.. Thus, it is partially cut off because it intrudes into the area of navigation.
So, I added padding and now it does not intrude as there is a space between the bottom of header.jpg and the bottom of the header area.
On firefox this looked fine. Fine on IE7. IE6 the nav bar cuts into the bottom of the image still.
I really don't want to increase the padding anymore and have a larger black space between bottom of header and bottom of image.
Also would like some padding on top of the image as right now it nestles right to the top of the page.
One more issue (while we are at it) is I notice when I hover a few pixels away from the link the hover turns on (color of text changes).. is there any setting so that the text only changes color when the mouse is over the text rather than a few pixels away at the side?
Summary:
1) padding on top of image (all browsers)
2) fix problem of nav bar cutting into image on IE6
3) mouse hover - text changes color from a few pixels away (all browsers)
4) when I click on the link now a small broken line border appears - not on hover but on click.. it appears around the link and off to the side a few pixels.. (does not happen with IE6 or IE7 - only happens on FF
5) Does the DOC Type Code also have to be in the CSS file?
I have validated this and included the doc type as you suggested. In fact I did the validation before making this post and it gave the all clear.
Regards
1) padding on top of image (all browsers)
2) fix problem of nav bar cutting into image on IE6
How to achieve what you want depends on where your image is in the xhtml and how you've retained the existing layout. The code in the thread started after this post doesn't have this image, so no clues there.
That thread indicates changes raise the old issue of logo crop. The reappearance of old issues means time to re-think management of the design. 'Til now the code has relied on the natural flow of elements, so perhaps time to consider using height on the header, widths on the elements, and margins, instead of relying on default flow and padding.
If you've applied the styling direct to the image like this:
<!-- header -->
<div id="header">
<img src="myimage.jpg" width="?" height="?" alt="My Heading" style="padding-bottom:10px"/>
#header img {
padding:10px 0;
}
Deal with ie6 by adding the same rule to your conditional comment in the xhtml, including a different dimension for the navbar issue
<!--[if lte IE 6 ]>
<style type="text/css">
#menu ul {width:710px;}
#header img {
padding:10px 0 15px 0;
}
</style>
<![endif]-->
3) mouse hover - text changes color from a few pixels away (all browsers)
Reducing the size of a clickable area creates usability and accessibility issues. SuzyUK's code needs adjustment to achieve the new design. Search on "horizontal menu" and variations, and webmasterworld has lots of egs.
4) when I click on the link now a small broken line border appears ... (does not happen with IE6 or IE7 - only happens on FF
This is default behaviour and a major usability feature. Search on "removing active focus borders" and variations. Here's the code for your style sheet, but please consider the accessibility implications.
#menu a {
outline-style:none;
}
5) Does the DOC Type Code also have to be in the CSS file?
Nope, just the xhtml ;)
but search on "xml prologue" for more information
thank you for this review, suggestions and advice.
Ted encouraged me to become more familiar (take a course, read a book, etc...) on css, html and xhtml as many of my questions would probably be dealt with at that level. I would end up with less questions that are considered 'basic entry level stuff' and work on getting advise for the more complex issues.
With that said, I will go thru each element of advise your have brought forward and do my best with it. Also, I went to borders today and started studying a book related to these topics. Just the chapter on DOCTYPE and validating was very helpful.
Thanks again and I will report back on my progress!
