17 replies [Last post]
purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

before I start building out the entire site based off the layout I have.
I have checked in FF IE6 & 7 however my friend says the header is being dropped down like so http://puredezigner.com/1.bmp (screencap) :shrug:

Website test area http://puredezigner.com/test/

I was wondering if I could get some other opinions about the header and might be leaning towards flash, but wanted to avoid it if at all possible.

I have tried to validate and have fixed all but one error in html validation, any suggestions here as well?

As usual thanks in advance! :thumbsup:

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The different border colours

The different border colours on different elements means it looks like things don't line up quite right.

You also run into problems with your top and left nav when you resize the text in the browser.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 3 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

When making a screen dump,

When making a screen dump, convert to gif, jpg or png. Anything but bmp. 4mBytes is way huge.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Sorry about that...

didn't even notice how big it was... any advice on the issues?

Thanks

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Also can someone please check this in safari

and offer any advise to fix safari issues, can I write a css script for safari only, or would i have to look into using a browser detector and redirctor to redirect safari traffic to another version of the site.

What do the pros do for safari issues?

I'm only concerned because about 4.8% of this sites current visitors use safari.

Thanks again.

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

purewebdesigner wrote:What

purewebdesigner wrote:
What do the pros do for safari issues?

The pros probably don't have that many issues with Safari and any they do, they find fixes for in their main stylesheet. They definitely don't use browser detection for sending alternative styles and/or content.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Thats what I thought too...

I need to build it so its as easy as possible to update.

Thanks Tyssen

Safari users feedback??

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

What has how easy it is to

What has how easy it is to update got to do with how it displays in Safari?

Quote:
Safari users feedback??

It sounds like you asking for alternative feedback because you don't like what I gave you. Believe me, no professional web designer worth his/her salt (or Safari user although they're not necessarily the same thing) will recommend you use browser detection for serving up different styles/content for Safari unless you're designing your site specifically with the iPhone in mind.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Tyssen wrote: It sounds like

Tyssen wrote:

It sounds like you asking for alternative feedback because you don't like what I gave you.

:?

No No No, Not at all, I just wanted to know if the site was breaking in safari. I checked it when I got into work this morning, looks fine in safari. I completely agree with you Tyssen about the use of browser detection and will avoid it going forward. Also, about what you said in the other post, thats good info to know, I'll be looking into reworking my main screen.css file to try to do away with my ie6.css script. Thanks for pointing me in the right direction - again. To be clear I DO appreciate all the advice, and also welcome other opinions. Just wanted feedback on how it looked in Safari.

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Have you tried this

Have you tried this yet:

Tyssen wrote:
You also run into problems with your top and left nav when you resize the text in the browser.

Verschwindende wrote:
  • CSS doesn't make pies

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

I've been struggling with

I've been struggling with that. Is there a way to fix that issue and still have the sidebars width set (non-liquid), and also have both sidebars move down under the menu if the text is increased? Know of any good tutorials or sites that can help me learn how to fix/prevent this?

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your left colum doesn't move

Your left colum doesn't move down on text resize because you've used absolute positioning. Your columns should be floated instead.

And the text in the left column links overflows the background because you've used bg-images which are of a fixed height. The only part of that image that should be an image is the arrow. The rest can be accomplished with bg-colors and borders which will expand to contain any text size increases.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Thanks, I'll get to work on

Thanks, I'll get to work on fixing it.

How would make the liquid center div stop when the site's width go past 1000px?
...should I start a new thread for this question?

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

I updated the site with to

I updated the site to control the center div width, and I am working on floating the sides. http://puredezigner.com/test/ and can't seem to get the right side from dropping below, am I missing something?

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

All the floats have to come

All the floats have to come first in the source so your right column needs to go ahead of your centre column.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Ok works fine in firfox, but

Ok works fine in firfox, but it fails completely in IE6, and IE7 has overlay issues.

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Part of the reason is cos

Part of the reason is cos you've got a height on #header which isn't high enough to include your navigation but you should probably also wrap all three of your columns in another wrapping element and make sure it is cleared properly from the preceding content.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 1 year 2 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

Tried the above, still

Tried the above, still having issues (menu being overlapped by proceeding floated div)... since my layout still needs work I started a new thread in css layouts area.
Thanks

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com