Just finished a site and it appears in IE6 & IE7 (Beta 1) to sort of add another bit of menu. Any ideas (doesn't look great having that extra bit there!)... or is this just IE being IE about CSS?
www.janerosedesign.co.uk
Thanks
Matt
Just finished a site and it appears in IE6 & IE7 (Beta 1) to sort of add another bit of menu. Any ideas (doesn't look great having that extra bit there!)... or is this just IE being IE about CSS?
www.janerosedesign.co.uk
Thanks
Matt
argh IE, always fussy
i have no idea why it decides to write contact twice, gimme a sec and ill have a play with your code.
edit: try taking float:left from your css on ul.navbar. now, all i get is that extra contact part when i hover over "home"
Last edited by Dav0s; 03-02-2006 at 09:58 PM.
Thanks Davos,
Tried it and it still sticks there for me (both IE6 & 7). Funny how I actually had hopes that IE7 would be CSS compliant
well I am only running Beta 1.
Also in IE I'm getting a really annoying grey bar (a pixel or so wide) at the end.
Cheers![]()
It's probably line breaks in your code, IE does funny things with them. Your code does need a lot of work though, lots of redundant CSS and HTML code. For W3C compliance you need to have all code in lower case and all properties in quotes e.g. class="blah" not class=blah.
I would remove the <ul> code, it's not needed unless you have drop down menus, just use the a tag and set it to display:block. As a rough example this is reasonably close to what you have
HTML Code
CSS CodeCode:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" type="text/css" rel="stylesheet"> <title>Jane Rose Garden Design</title> </head> <body> <img src="images/titlebar.jpg" /> <div class="nav"><a href="index.htm">.:Home:.</a><a href="about.htm">.:About:.</a><a href="com.htm">.:Commissioning:.</a><a href="chelsea.htm">.:Chelsea 2006:.</a><a href="contact.htm">.:Contact:.</a></div> <div class="container"> <div class="content"> <h2>Jane Rose Garden Design - Home</h2> <p>For a garden to reach its full potential it must have a well planned structural design which must be not only sympathetic to its surroundings but also reflect the architecture of the property and the uses to which the owners wish to put it.</p> <h2>Design Philosophy</h2> <p>Good planting is enchanced by good structure but diminished by poor.</p> </div> <div class="footer"> <div class="right"> Web Design © 2006 <a href="http://www.matteon.co.uk/" target="_blank">MATTEON Software</a> </div> <p>Contact: <a href="mailto:webmaster@janerosedesign.co.uk">Webmaster</a> <br /> Horseshoe Green Farmhouse, Markbeech, Edenbridge, Kent, TN8 5PA - Tel. (01342) 850 872</p> </div> </div> </body> </html>
Code:body { background: #dddddd; color: #666666; font: normal 11px Verdana, arial, sans-serif; text-align: center;} h1 { color: #8cd749; font-size: 16px; font-style: italic;} h2 { color: #666666; font-family: arial; font-size: 11px; margin: 5px 0 5px 0;} a { color: #8cd749;} a:hover { color: #3b4471; text-decoration: none;} .container { background: #ffffff; text-align: left; margin: auto; width: 78%;} .container .content { padding: 10px;} .nav { margin: auto; width: 78%;} .nav a { background: #99ccff; display: block; color: #000000; float: left; padding: 5px 0 5px 0; text-align: center; text-decoration: none; width: 20%;} .nav a:hover { background: #ffffcc;} .footer { border-top: 1px #999999 solid; font-size: 8px;} .footer .right { float: right; margin: 10px 0;}
Many thanks Iain this is my first main use of CSS so your help is great!
I've got a sandboxed version at www.janerosedesign.co.uk/compliantcode/ and I put in your ammended code (only on index.htm). The bar bits are lost and just left as text.
When I ran the HTML through the validator it demanded I put in alt tags on the titlebar.jpg image and I did. It's now saying:
Also, since when has:Originally Posted by w3c
there been no such thing asOriginally Posted by w3c
ThanksCode:target="_blank"
hi, Iain just forgot to put display:block in the CSS for "nav"
.nav {
margin: auto;
width: 78%;
display:block;
}
that makes it pretty much display how you want i think
you don't need it in nav, it's a div and displays as a block by default, you only need it on the <a> tag which is inline by default.
target was deprecated in favour of rel but it also means you need javascript to convert your rel properties into new windows.
Your sandbox environment isn't using the CSS I provided hence the problems you see.
target= isn't nice because it forces people, or rather their browsers, to do things that they might not want to do i.e. open a new window. The principle is that if somebody wants a page in a new window/tab, they will do it themselves. If you start opening new windows up by yourself, you can annoy people, confuse people, break the back button, etc.
"Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."
It's saying tehre is not target= because you are giving your site a HTML doctype, if you change it to HTML 4.01 then it would probably not give you that error.
target is depricated in XHTML.
oh, well i used your css and your code, and got the same problems as matt, when i changed nav to display:block it seemed to work :S
but i see what you mean..so dont know why it made a difference :/
Most users aren't very aware of new windows and then worry when they're taken off site.Originally Posted by mike_w
--------------------------------
Will doOriginally Posted by Michael
--------------------------------
Oh, I remember, got SmartFTP to vertical align and the windows swapped so I dragged the old stylesheet over the new one hence sandboxed one hadn't changed.
--------------------------------
What about error 1?
--------------------------------
Thanks all. Will re-do tomorrow![]()
Try whacking the image in a div (put it into the W3 Validator, and it worked fine, but not sure about the impact on layout, if any.)Originally Posted by Matt1eD
Oh, and if you use XHTML1.0 Transitional, the target should be fine. (Actually, it is all fine as XHTML1.0 Transitional: http://validator.w3.org/check?uri=ht...onal&verbose=1)
"Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."
OK, thanks mike_w
---------------------------
Just noticed with Iain's updated stylesheet a border at the bottom of the image has been lost.
I don't see any border on either version... do you mean a gap between the image and the stuff below it? If so, you can add a div around the image, give it an id or class, and play around with padding/margin in the CSS.Originally Posted by Matt1eD
e.g.
orCode:#banner{ padding:1em; }
orCode:#banner{ padding-bottom:1em; }
And so on and so forth...Code:#banner{ padding:0em 0em 1em 0em; }
Oh, and while I'm at it, there is a small bit of unneeded punctuation in the nav bar. Fine for me, but not for somebody that, for example, is blind and has websites read out to them. It might read something like this: full stop colon home colon full stop full stop colon about colon full stop full stop colon...
In fact, I should just recommend diveintoaccessibility.org. There are plenty of websites about this sort of thing around, but this one is one of the best I've found.
e.g. New windows: http://diveintoaccessibility.org/day...w_windows.html
Last edited by mike_w; 04-02-2006 at 09:22 PM.
"Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."
Thanks for the links & update.
Will speak to the person concerned about the .:bits:. I don't think they'll be too dissapointed to see them go, as for the "_target" that may take more pursuading (has for me!!).
For more info on replacing target="_blank" look here http://www.thex.com/webstandards/?p=26
Oh and Matt1eD, your sig image is too tall. Max height is 100px unless you have dispensation from the admin team. Thanks
There are currently 1 users browsing this thread. (0 members and 1 guests)