The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Homepage Format Randomly Changes, Menu and image move down the page
zojo_schwarz
post May 9 2012, 04:43 PM
Post #1





Group: Members
Posts: 7
Joined: 9-May 12
Member No.: 17,084



Hi Everyone,

The menu on my homepage sometimes moves down the page, from its set position. This causes the image below it to shift too. Please see the attached screen shots for your reference.

Once I navigate away from the homepage (to another page of the website) and back again, both the menu and image are back in their normal positions and remain there until I leave the website. Sometimes refreshing the page makes them move back too. As I mentioned before, this shift only happens sometimes.

I've viewed the website through several browsers and the same issue keeps coming up.

I've run the HTML and CSS through the WC3 validators and no problems were identified. This is my first website though so I'm sure I've muddled something up.

Does anyone know what could be causing this?

Thank you in advance for your advice.

http://www.zoegraphicdesign.com/
Attached Image Attached Image

This post has been edited by zojo_schwarz: May 9 2012, 04:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 9 2012, 05:05 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(zojo_schwarz @ May 9 2012, 11:43 PM) *

The menu on my homepage sometimes moves down the page, from its set position. This causes the image below it to shift too.

In which browser/version?

In the meantime, these CSS pseudo-class selectors are incorrect (it should be a:link etc), but for some reason the CSS validators don't complain:

CODE
a link {
    color: #000000;
    text-decoration: none;
}

a visited {
    color: #000000;
}

a hover {
    text-decoration: none;
    color: #000000;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2012, 07:18 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The validator doesn't care about element names and it thinks link, hover and visited are element names. This is probably because CSS isn't HTML specific and the element names aren't part of CSS anyway. It just checks the selector syntax and that is correct, even if the meaning is other than the intended.

http://jigsaw.w3.org/css-validator/validat...;usermedium=all
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
zojo_schwarz
post May 11 2012, 01:46 PM
Post #4





Group: Members
Posts: 7
Joined: 9-May 12
Member No.: 17,084



Hi Christian J,
thanks for taking a look at this. I'll fix those selectors up.
The browsers I've used are Safari 5.1.5, Chrome (latest version), Firefox 4.0.1

QUOTE(Christian J @ May 9 2012, 03:05 PM) *

QUOTE(zojo_schwarz @ May 9 2012, 11:43 PM) *

The menu on my homepage sometimes moves down the page, from its set position. This causes the image below it to shift too.

In which browser/version?

In the meantime, these CSS pseudo-class selectors are incorrect (it should be a:link etc), but for some reason the CSS validators don't complain:

CODE
a link {
    color: #000000;
    text-decoration: none;
}

a visited {
    color: #000000;
}

a hover {
    text-decoration: none;
    color: #000000;
}


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
zojo_schwarz
post May 11 2012, 01:47 PM
Post #5





Group: Members
Posts: 7
Joined: 9-May 12
Member No.: 17,084



Of course, that makes sense.

QUOTE(pandy @ May 9 2012, 05:18 PM) *

The validator doesn't care about element names and it thinks link, hover and visited are element names. This is probably because CSS isn't HTML specific and the element names aren't part of CSS anyway. It just checks the selector syntax and that is correct, even if the meaning is other than the intended.

http://jigsaw.w3.org/css-validator/validat...;usermedium=all

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 11 2012, 04:03 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(zojo_schwarz @ May 9 2012, 11:43 PM) *

Once I navigate away from the homepage (to another page of the website) and back again, both the menu and image are back in their normal positions and remain there until I leave the website. Sometimes refreshing the page makes them move back too. As I mentioned before, this shift only happens sometimes.

Maybe it happens when the logo image is slow to load? I get a similar result on a test page if I prevent the logo image from loading*. Try giving div#header an explicit height and see if that helps. unsure.gif

*(This only happens in Firefox, since that browser may collapse placeholders for broken images. Can't remember what happens while/before a non-broken image is loaded. My Chrome-based browser doesn't collapse broken image placeholders.)


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2012, 06:14 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



In K-Mel the menu is below the line all the time. The images are scattered all over, so I can't judge if this affects them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
zojo_schwarz
post May 11 2012, 07:35 PM
Post #8





Group: Members
Posts: 7
Joined: 9-May 12
Member No.: 17,084



Ok, I'll give that a go. Thanks for the suggestion!

QUOTE(Christian J @ May 11 2012, 02:03 PM) *

QUOTE(zojo_schwarz @ May 9 2012, 11:43 PM) *

Once I navigate away from the homepage (to another page of the website) and back again, both the menu and image are back in their normal positions and remain there until I leave the website. Sometimes refreshing the page makes them move back too. As I mentioned before, this shift only happens sometimes.

Maybe it happens when the logo image is slow to load? I get a similar result on a test page if I prevent the logo image from loading*. Try giving div#header an explicit height and see if that helps. unsure.gif

*(This only happens in Firefox, since that browser may collapse placeholders for broken images. Can't remember what happens while/before a non-broken image is loaded. My Chrome-based browser doesn't collapse broken image placeholders.)



Ok, I'll give that a go. Thanks for the suggestion!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
zojo_schwarz
post May 11 2012, 07:36 PM
Post #9





Group: Members
Posts: 7
Joined: 9-May 12
Member No.: 17,084



That doesn't sound good. What's K-Mel? I'm very new to all of this.
Thanks
QUOTE(pandy @ May 11 2012, 04:14 PM) *

In K-Mel the menu is below the line all the time. The images are scattered all over, so I can't judge if this affects them.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 11 2012, 07:37 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ May 12 2012, 01:14 AM) *

In K-Mel the menu is below the line all the time.

Same in mine. Seems one can fix it by left-floating the logo, and then clear both floats inside div#header (after ul#nav).


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 11 2012, 07:41 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



K-Meleon is an old browser that pandy keeps using. tongue.gif It (K-Mel, not pandy) is based on the same layout engine (Gecko) as Firefox.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2012, 07:48 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes, sadly it's dying, I fear. But it isn't that old. It's like maybe a year and a half old Firefox. Not everyone keeps upgrading, but if you use another browser than IE it seems you are required too. Most sites that malfunction in K-Mel and any other older gecko browser works fine in IE7. Go figure...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
zojo_schwarz
post May 13 2012, 04:14 PM
Post #13





Group: Members
Posts: 7
Joined: 9-May 12
Member No.: 17,084



Thanks so much for your help with my website and filling me in on K-Mel. I really appreciate you taking the time. I'm going to make those adjustments to my website asap. I'll let you know how I go.
Thanks again!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
zojo_schwarz
post May 14 2012, 02:35 PM
Post #14





Group: Members
Posts: 7
Joined: 9-May 12
Member No.: 17,084



That's done the trick. Thank you so much! biggrin.gif


QUOTE(Christian J @ May 11 2012, 05:37 PM) *

QUOTE(pandy @ May 12 2012, 01:14 AM) *

In K-Mel the menu is below the line all the time.

Same in mine. Seems one can fix it by left-floating the logo, and then clear both floats inside div#header (after ul#nav).

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: 29th March 2024 - 10:00 AM