The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Overlapping DIVs issue.
pti
post Feb 15 2008, 05:35 PM
Post #1





Group: Members
Posts: 5
Joined: 15-February 08
Member No.: 4,981



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!!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 15 2008, 06:48 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,565
Joined: 9-August 06
Member No.: 6



QUOTE
IE displays this correctly.
FF/Opera do not.


Sounds like you have designed to IE bugs then.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 15 2008, 06:52 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



I recommend that you start by fixing the markup errors 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 Web pages aren't printed on paper.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pti
post Feb 15 2008, 07:44 PM
Post #4





Group: Members
Posts: 5
Joined: 15-February 08
Member No.: 4,981



QUOTE(Darin McGrew @ Feb 15 2008, 05:52 PM) *

I recommend that you start by fixing the markup errors 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 Web pages aren't printed on paper.


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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 15 2008, 08:20 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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 iGoogle. 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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pti
post Feb 16 2008, 11:04 AM
Post #6





Group: Members
Posts: 5
Joined: 15-February 08
Member No.: 4,981



QUOTE(Darin McGrew @ Feb 15 2008, 07:20 PM) *

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

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.


QUOTE(Darin McGrew @ Feb 15 2008, 07:20 PM) *
For example, take a look at the themes for iGoogle. 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.

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!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 16 2008, 11:55 AM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pti
post Feb 16 2008, 02:21 PM
Post #8





Group: Members
Posts: 5
Joined: 15-February 08
Member No.: 4,981



QUOTE(Darin McGrew @ Feb 16 2008, 10: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.


That would be one wide road wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 16 2008, 06:09 PM
Post #9


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pti
post Feb 18 2008, 11:09 AM
Post #10





Group: Members
Posts: 5
Joined: 15-February 08
Member No.: 4,981



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 18 2008, 11:16 AM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,565
Joined: 9-August 06
Member No.: 6



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. wink.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th October 2014 - 02:43 AM