SourceTec Software

It is currently Thu Apr 17, 2014 3:48 am

All times are UTC + 8 hours




Post new topic Reply to topic  [ 15 posts ] 
Author Message
PostPosted: Thu Jul 29, 2010 10:22 pm 
Offline
Poster
User avatar

Joined: Thu Oct 17, 2002 3:40 pm
Posts: 83
Location: the Netherlands
Hello all,

I have an aligment issue in Chrome and Safari for Windows.

If you take a look at http://www.okbabyfietsstoel.nl and go with your mouse over the menu (for example the menu item producten) you can see that the submenu's falls outside of the site and doesn't align beneath the main menu item. It does work fine in IE8 and FF3.

Would anyone know what the problem might be?


Top
 Profile  
 
PostPosted: Fri Jul 30, 2010 3:16 am 
Offline
Guru
User avatar

Joined: Tue Aug 05, 2003 6:39 pm
Posts: 1130
Location: Ohio
Wolf wrote:
Hello all,

I have an aligment issue in Chrome and Safari for Windows.

If you take a look at http://www.okbabyfietsstoel.nl and go with your mouse over the menu (for example the menu item producten) you can see that the submenu's falls outside of the site and doesn't align beneath the main menu item. It does work fine in IE8 and FF3.

Would anyone know what the problem might be?

Looks okay to me in Safari for Windows (5.0). . .


Top
 Profile  
 
PostPosted: Fri Jul 30, 2010 3:52 am 
Offline
Poster
User avatar

Joined: Thu Oct 17, 2002 3:40 pm
Posts: 83
Location: the Netherlands
That's kind of weird, because here it looks terrible in both Chrome 5.0.375.125 and Safari for Windows 5.0.1.7533.17.8 running on Windows XP Pro with all updates on a screen resolution of 1680x1050 with a DPI setting of 96.

For some screenshots look here:

http://www.okbabyfietsstoel.nl/chrome.jpg

and here

http://www.okbabyfietsstoel.nl/safari.jpg

As you can see the submenu is next to the main content, partially overlapping the name of the company, while it should be below the "producten" menu item.


Top
 Profile  
 
PostPosted: Fri Jul 30, 2010 7:01 am 
Offline
Guru
User avatar

Joined: Tue Aug 05, 2003 6:39 pm
Posts: 1130
Location: Ohio
Wolf wrote:
That's kind of weird, because here it looks terrible in both Chrome 5.0.375.125 and Safari for Windows 5.0.1.7533.17.8 running on Windows XP Pro with all updates on a screen resolution of 1680x1050 with a DPI setting of 96.

For some screenshots look here:

http://www.okbabyfietsstoel.nl/chrome.jpg

and here

http://www.okbabyfietsstoel.nl/safari.jpg

As you can see the submenu is next to the main content, partially overlapping the name of the company, while it should be below the "producten" menu item.

Look here

http://incitevisual.com/images/okbaby_Safari.jpg

This was with a just downloaded version of Safari, Windows 7 Professional 64bit. . .


Top
 Profile  
 
PostPosted: Fri Jul 30, 2010 9:13 am 
Offline
Guru
User avatar

Joined: Mon May 10, 2004 3:53 am
Posts: 1752
Location: Rescue, CA, USA
Hi Mike and Wolf,

First, I apologize for my absence from this forum but with my business and a 2-1/2 year-old granddaughter vying for my time I haven't had the free time I used to enjoy. I guess I finally got a life, as TheUsername once suggested. In fact, right now I should be working on a client site that I couldn't finish during the day but I decided to take a few minutes to see what's happening on this forum.

I see the same submenu alignment problem that Wolf sees with the latest versions of Google Chrome and Safari, both Webkit browsers. I can't understand why the submenus work for Mike in Safari. I'm running Windows 7 Home Premium 64-bit and not Windows 7 Professional 64-bit but that shouldn't make a difference.

I have to get back to work now but I'll try to drop by tomorrow to see if anyone has solved this mystery.

Regards,

Bill


Top
 Profile  
 
PostPosted: Tue Aug 03, 2010 11:09 pm 
Offline
Poster
User avatar

Joined: Thu Oct 17, 2002 3:40 pm
Posts: 83
Location: the Netherlands
I still have a submenu alignment issue with Chrome and Safari for Windows which I am also noticing on completely different sites. Namely this one:
http://www.anderzijds-mediation.nl/test/index.html
also with an older version of DHTML Menu which I used here:
http://www.isis-books.nl/

so it seems to be a rather serious problem.

I need more help to solve this issue.


Top
 Profile  
 
PostPosted: Wed Aug 04, 2010 12:31 am 
Offline
Guru
User avatar

Joined: Mon May 10, 2004 3:53 am
Posts: 1752
Location: Rescue, CA, USA
Hi Wolf,

Our granddaughter isn't here today so I have some time to "play." The problem is being caused by your CSS. Take a look at:

http://bestwebmenu.com/wolf/test/

All I did was delete the following CSS:
Code:
<style type="text/css">
div#dhecenterdiv1 {margin: 0px auto; position: relative; width: 753px;}
img {behavior: url("png32.htc");}
input {behavior: url("png32.htc");}
body {margin: 0px; padding: 0px; text-align: center;}
</style>

Here is an example of a centered page with your menu and the drop downs should align correctly in all current browsers:

http://bestwebmenu.com/wolf/test/new.html

I still don't understand why your menu appeared OK in Mike's browser.

Regards,

Bill


Top
 Profile  
 
PostPosted: Wed Aug 04, 2010 1:38 am 
Offline
Poster
User avatar

Joined: Thu Oct 17, 2002 3:40 pm
Posts: 83
Location: the Netherlands
But why would this part of the css give any problems at all?

I don't see anything in the css that would have this effect on Chrome/Safari.

div#dhecenterdiv1 {margin: 0px auto; position: relative; width: 753px;
img {behavior: url("png32.htc");}
input {behavior: url("png32.htc");}
body {margin: 0px; padding: 0px; text-align: center;}

All this css does is center the div, sets the width, the padding and margin and points to a htc file which solves png issues.

So why would DHTML Menu have a problem in Chrome/Safari?


Top
 Profile  
 
PostPosted: Wed Aug 04, 2010 4:30 am 
Offline
Guru
User avatar

Joined: Tue Aug 05, 2003 6:39 pm
Posts: 1130
Location: Ohio
Bill_P wrote:
I still don't understand why your menu appeared OK in Mike's browser.

Regards,

Bill

Mine's better than yours. . . (or worse. . .)

:lol:


Top
 Profile  
 
PostPosted: Wed Aug 04, 2010 4:58 am 
Offline
Guru
User avatar

Joined: Mon May 10, 2004 3:53 am
Posts: 1752
Location: Rescue, CA, USA
Mike, you have a version of Windows 7 with more features. That shouldn't cause a page to render differently in a browser but I can't think of anything else that could be causing the difference.

Wolf, I think the only line of code causing the problem is:
Code:
div#dhecenterdiv1 {margin: 0px auto; position: relative; width: 753px;}

The code could be interacting with something else on the page to cause the problem. I don't have time to look at your code in detail but I took a quick glance and you have a number of absolutely positioned DIVs and they are tricky because they "float" outside the page structure.

Regards,

Bill


Top
 Profile  
 
PostPosted: Wed Aug 04, 2010 5:05 am 
Offline
Guru
User avatar

Joined: Mon May 10, 2004 3:53 am
Posts: 1752
Location: Rescue, CA, USA
Both Chrome and Safari are Webkit browsers. Take a look at this:

http://code.google.com/p/chromium/issues/detail?id=25612


Top
 Profile  
 
PostPosted: Mon Jan 24, 2011 10:01 pm 
Offline
Member

Joined: Mon Jan 24, 2011 9:42 pm
Posts: 2
Hi,

I'm having a similar problem to this but its happening in firefox. I've tracked it down to the resolution of my screen. If the page is nice and snug with the borders of my browser then the menu appears fine, if I use a higher resolution and the page automatically leave a little bit of white space at the sides of my page then the sub menus get pulled out of alignment.

Here's the link to my page : http://www.northsidestageschool.com.

The menu will appear fine in Internet Explorer because Explorer doesn't leave any whitespaces on the sides (not quiet sure why). The menu works fine on my lower res secondary monitor (1024x768) but is out of alignment on my other monitor (1920x1200).

I think what I need to do is lock the menu into the 'navigation' div a little better, but I don't know how.

Any ideas?


Mike


Top
 Profile  
 
PostPosted: Tue Jan 25, 2011 3:53 am 
Offline
Guru
User avatar

Joined: Mon May 10, 2004 3:53 am
Posts: 1752
Location: Rescue, CA, USA
Hi Mike,

I don't think it has anything to do with DHTML Menu. I think it's a CSS layout problem. In IE8 your page is full screen width and the drop down submenus appear correctly. In other browsers such as Chrome and Firefox, your layout appears to be fixed width and centered and the drop down submenus are not displayed correctly. As a first step, try removing the following text which appears immediately before your DOCTYPE:

SELECT translation_language_3 from translation where translation_label = 'translation_language_name'here again

Regards,

Bill
Unofficial DHTML Menu Resource


Top
 Profile  
 
PostPosted: Tue Jan 25, 2011 6:46 pm 
Offline
Member

Joined: Mon Jan 24, 2011 9:42 pm
Posts: 2
Hi bill, thanks for the reply. Sorry about that piece of MySQL code, it was just there to help me with another problem i'm having with the menu, which ill post later!! Getting back to this problem, I figured that it had something to do with the css, that the top level understands that it needs to be in a certain div but the submenus are confirming to a different rule. How do i tell the sub menus to stay put?

My css for the page is as follows:

html, body{
margin:0px auto;
padding:0px;
min-width: 200px;
max-width: 1000px;
}

#pagewidth{
width:100%;
text-align:left;
margin:0px auto;
min-width: 150px;
}

#header{
position:relative;
height:150px;
background-color:#000C03;
width:100%;
display:block;
overflow:hidden;
margin:0px auto;
text-align: center;
}
#navigation{
position:relative;
height:auto;
background-color:#000000;
width:100%;
display:block;
overflow:hidden;
margin:0px auto;
text-align: center;
min-width: 150px;
}
#leftcol{
width:25%;
float:left;
position:relative;
background-color:#F0F000;
overflow:hidden;
height: auto;
}

#maincol{
background-color: #00FF00;
position: relative;
width:75%;
float:right;
overflow:hidden;
height:auto;
}

#footer{
height:10%;
background-color:#000CFF;
clear:both;
display:block;
overflow:hidden;
}

Mike


Top
 Profile  
 
PostPosted: Tue Jan 25, 2011 11:44 pm 
Offline
Guru
User avatar

Joined: Tue Aug 05, 2003 6:39 pm
Posts: 1130
Location: Ohio
michaeln31 wrote:
Hi bill, thanks for the reply. Sorry about that piece of MySQL code, it was just there to help me with another problem i'm having with the menu, which ill post later!! Getting back to this problem, I figured that it had something to do with the css, that the top level understands that it needs to be in a certain div but the submenus are confirming to a different rule. How do i tell the sub menus to stay put?

My css for the page is as follows:

html, body{
margin:0px auto;
padding:0px;
min-width: 200px;
max-width: 1000px;
}

#pagewidth{
width:100%;
text-align:left;
margin:0px auto;
min-width: 150px;
}

#header{
position:relative;
height:150px;
background-color:#000C03;
width:100%;
display:block;
overflow:hidden;
margin:0px auto;
text-align: center;
}
#navigation{
position:relative;
height:auto;
background-color:#000000;
width:100%;
display:block;
overflow:hidden;
margin:0px auto;
text-align: center;
min-width: 150px;
}
#leftcol{
width:25%;
float:left;
position:relative;
background-color:#F0F000;
overflow:hidden;
height: auto;
}

#maincol{
background-color: #00FF00;
position: relative;
width:75%;
float:right;
overflow:hidden;
height:auto;
}

#footer{
height:10%;
background-color:#000CFF;
clear:both;
display:block;
overflow:hidden;
}

Mike

The quickest way to isolate potential CSS problems is to comment out half of your CSS file. If the problem persists, uncomment that section and comment out the other half. That will tell you approximately where the problem code is. Then just whittle it down from there. . .


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 15 posts ] 

All times are UTC + 8 hours


Who is online

Users browsing this forum: Google [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group