471,896 Members | 1,666 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,896 software developers and data experts.

CSS layout problem in 1E6 and Safari

Hi all, I have put together our own web site, its only small so I
decided after reading up on CSS web design to do the site myself.

The site looks good in IE7 but when you use IE6 the green and red box
buttons on the right shift down to the bottom of the page instead of
being at the right. Also, in Safari the web site appears ro move down
by an inch which results in the horizontal tiled background being out
of place with the rest of the site.

If anyone has any pointers or suggestions I would appreciate it.
http://www.neighbourhoodcomputers.com/

Many thanks for your time

Lee

Aug 8 '07 #1
3 2129
le************@gmail.com wrote:
Hi all, I have put together our own web site, its only small so I
decided after reading up on CSS web design to do the site myself.

The site looks good in IE7 but when you use IE6 the green and red box
buttons on the right shift down to the bottom of the page instead of
being at the right. Also, in Safari the web site appears ro move down
by an inch which results in the horizontal tiled background being out
of place with the rest of the site.
This is probably due to your attempt at exact pixel sizing. That never
works. See:
http://allmyfaqs.net/faq.pl?AnySizeDesign
If anyone has any pointers or suggestions I would appreciate it.

http://www.neighbourhoodcomputers.com/
There are other problems as well:
http://k75s.home.att.net/show/neighborhood.jpg

In the Firefox Web Developers Toolbar/edit CSS, I see some weird
characters at the beginning of your CSS that affect my display (removing
body settings), but they don't seem to be in your CSS file. I don't see
this at any other sites.
http://k75s.home.att.net/show/neighborhoodcss.jpg

"font-size: small" may work for your eyes, but not for mine. Use
percentages instead, and default to 100%. See this page and also note
the section on Verdana:
http://k75s.home.att.net/fontsize.html

These are new pages, you say. New pages should use a Strict doctype as
you aren't Transitioning from anything. Also, best to eschew XHTML and
use HTML 4.01 Strict (for the oft-mentioned reasons).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Hope this gets you started.

--
-bts
-Motorcycles defy gravity; cars just suck
Aug 8 '07 #2
On 2007-08-08, le************@gmail.com <le************@gmail.comwrote:
Hi all, I have put together our own web site, its only small so I
decided after reading up on CSS web design to do the site myself.

The site looks good in IE7 but when you use IE6 the green and red box
buttons on the right shift down to the bottom of the page instead of
being at the right. Also, in Safari the web site appears ro move down
by an inch which results in the horizontal tiled background being out
of place with the rest of the site.

If anyone has any pointers or suggestions I would appreciate it.
http://www.neighbourhoodcomputers.com/
#header h1, #main-image h1 { margin: 0; }

See CSS 2.1 spec re "margin collapsing" (which I've heard IE7 gets
wrong, which might explain why your page "works" in IE7). This should
get things lined up with the background image in Safari.
Aug 9 '07 #3
Thanks both for your commentrs - I will implement those suggestions
and re-test.

Thanks for your time

Lee

Aug 9 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

39 posts views Thread by Zak McGregor | last post: by
4 posts views Thread by nevenuf24 | last post: by
14 posts views Thread by slobjones | last post: by
3 posts views Thread by Rich.Hephner | last post: by
1 post views Thread by gatorade | last post: by
9 posts views Thread by Eric Lindsay | last post: by
3 posts views Thread by Andy B | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.