Printable Version of Topic

Posted by: pti Feb 15 2008, 05:35 PM

http://paulinc.com/new/

IE displays this correctly.
FF/Opera do not.

Two things I can see... the first being the little discrimination notice at the bottom doesn't line up at the bottom. The second is obviously the text overflow.

I'm sure it is simple, just no idea what it can be!!

Spent tons of time trying different things, researching the problem but keep coming up dry.

Thanks!!!!

Posted by: pandy Feb 15 2008, 06:48 PM

Sounds like you have designed to IE bugs then.

Posted by: Darin McGrew Feb 15 2008, 06:52 PM

I recommend that you start by fixing the http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fpaulinc.com%2Fnew%2F&warnings=yes reported by our online validator.

Don't use px (or pt) for font sizes. Use 100% for body text, larger percentages for headings and the like, and (slightly) smaller percentages for legalese and similar fine print.

It looks like you've got everything positioned and sized in pixels, and it breaks when something isn't the way it is on your system. Don't do that. See also http://www.westciv.com/style_master/house/good_oil/not_paper/.

Posted by: pti Feb 15 2008, 07:44 PM

Markup errors- not sure about the first four.... I wasn't the one that did that Javascript, so I have no idea on that! That code is actually used for things elsewhere on the site, and not on this homepage... just easier to load it into each page though.

As for all the <li> errors, I do not understand? The code looks OK To me, how else would I do a bulleted list?
Do you really think an UL like that would cause the other divs to not load and position correctly?


Read that article... interesting. The font size portion I understand and completely agree with. This is something I'll have to play around with once I get this layout fixed.
I understand using a fluid layout is the best. Ideally, it'd be nice to have it like that. But how do you do that when you are restricted by images (like the header image)? I know no other way than to specify the main content is no bigger than 700px, how would you do it?

Thanks!

Posted by: Darin McGrew Feb 15 2008, 08:20 PM

The <li> errors are caused by the corrections the validator makes for the <br> errors.

I wouldn't restrict it to 700px. I'd design the header to adapt to the available display area.

For example, take a look at the themes for http://www.google.com/ig. Many have a single image in the middle of the header, with a horizontally repeating background that extends the width of the display area, whatever that might be.

Posted by: pti Feb 16 2008, 11:04 AM

Hmmm....
Get rid of the <br> I fix the problem? Guess I didn't think of that but since it is LIs then I don't need <br> I guess.



That looks nice, however I don't think there is any way to implement this with the design I have right now... I need an image that is related to the business, and I just cannot do that with any sort of a repeating image.


Will give these suggestions a try though, thanks!

Posted by: Darin McGrew Feb 16 2008, 11:55 AM

I think you could fade the photo of the asphalt into a single color at the left and right edge, and then use that color as a background behind the image. Or you could fade it to an asphalt texture, and put a background image of just that texture behind the image.

Posted by: pti Feb 16 2008, 02:21 PM

That would be one wide road

Posted by: Darin McGrew Feb 16 2008, 06:09 PM

Okay, use an image with a shoulder on either side of the road, and have the repeating background match the shoulder...

Posted by: pti Feb 18 2008, 11:09 AM

Seem to have fixed my footer issues but as far as valid XHTML is going- still doesn't validate. Has to do with this javascript- of which I neither wrote or know anything about (Before my time), do you know why this isn't working?

Posted by: pandy Feb 18 2008, 11:16 AM

Looks like it sees '<a.length' as a start tag. Put the script in an external js file. You should do that anyway, since you write XHTML and all.