[css-d] Drop down menu pushing content down
Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/wb/ I think the problem is the drop-down nav menu on the left. The sub uls expand the width of the top level ul to accommodate them and this is pushing the main content down. If anyone can suggest a solution it would be appreciated. regards, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
On Tue, 19 Mar 2013 12:17:28 +, Mike wrote: | Hi guys, | | I hope someone can help with a little problem. A new website I am | designing looks perfect in Firefox 18 on Linux and in Safari. But it's | not right in Opera on Linux, Chrome on Windows and probably several | others. URL - www.integra-server.co.uk/lnp/wb/ | | I think the problem is the drop-down nav menu on the left. The sub uls | expand the width of the top level ul to accommodate them and this is | pushing the main content down. | | If anyone can suggest a solution it would be appreciated. As always - validate :) http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.integra-server.co.uk%2Flnp%2Fwb%2F 17 errors http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=http%3A%2F%2Fwww.integra-server.co.uk%2Flnp%2Fwb%2F 15 errors Cheers, -- David Postill Dance your Life - Biodanza in Alkmaar, Holland - http://www.danceyourlife.eu __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
On Tue, Mar 19, 2013 at 12:17 PM, Mike m...@integrawebdesign.co.uk wrote: Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/**wb/ http://www.integra-server.co.uk/lnp/wb/ On my windows desktop computer it looks ok in Chrome but not in IE 9. Could it be something to do with how different browsers interpret the box model? (some count the padding as part of the width and some don't). If floated content is too wide for the container it gets pushed down. Someone helped me with this issue on here recently and gave me this code to put in the css to fix it. * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Regards, Laura __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
On 19/03/13 13:55, Laura Valentino wrote: On Tue, Mar 19, 2013 at 12:17 PM, Mike m...@integrawebdesign.co.uk wrote: Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/**wb/ http://www.integra-server.co.uk/lnp/wb/ On my windows desktop computer it looks ok in Chrome but not in IE 9. Could it be something to do with how different browsers interpret the box model? (some count the padding as part of the width and some don't). If floated content is too wide for the container it gets pushed down. Someone helped me with this issue on here recently and gave me this code to put in the css to fix it. * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Regards, Laura Thanks, Laura, but it doesn't solve the problem. In fact, it reduces the widths of the boxes and makes it look worse. Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
On Tue, Mar 19, 2013 at 10:51 AM, Mike m...@integrawebdesign.co.uk wrote: On 19/03/13 13:55, Laura Valentino wrote: On Tue, Mar 19, 2013 at 12:17 PM, Mike m...@integrawebdesign.co.uk wrote: Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/wb/http://www.integra-server.co.uk/lnp/**wb/ http://www.integra-server.co.**uk/lnp/wb/http://www.integra-server.co.uk/lnp/wb/ On my windows desktop computer it looks ok in Chrome but not in IE 9. Could it be something to do with how different browsers interpret the box model? (some count the padding as part of the width and some don't). If floated content is too wide for the container it gets pushed down. Someone helped me with this issue on here recently and gave me this code to put in the css to fix it. * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Regards, Laura Thanks, Laura, but it doesn't solve the problem. In fact, it reduces the widths of the boxes and makes it look worse. Mike -- Im wondering if it might be a float/width issue, maybe? I was only able to see the issue in IE9. Does adjusting the width/margins of the nav and/or #content help? Also, are you telling the browsers what wrapper/wrapper is and how to render it? Just some thoughts... -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Mike Sent: Tuesday, March 19, 2013 8:17 AM To: css-d@lists.css-discuss.org Subject: [css-d] Drop down menu pushing content down Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/wb/ I think the problem is the drop-down nav menu on the left. The sub uls expand the width of the top level ul to accommodate them and this is pushing the main content down. If anyone can suggest a solution it would be appreciated. regards, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 The content div needs a width. Try 760px You can 'play' with this live by using a Developer Tool for the browser -Fred Hahnel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ This message contains information which may be confidential and privileged. Unless you are the intended recipient (or authorized to receive this message for the intended recipient), you may not use, copy, disseminate or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and delete the message. Thank you very much. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
On 19/03/13 15:32, Hahnel, Fred (DET-MRM) wrote: -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Mike Sent: Tuesday, March 19, 2013 8:17 AM To: css-d@lists.css-discuss.org Subject: [css-d] Drop down menu pushing content down Hi guys, I hope someone can help with a little problem. A new website I am designing looks perfect in Firefox 18 on Linux and in Safari. But it's not right in Opera on Linux, Chrome on Windows and probably several others. URL - www.integra-server.co.uk/lnp/wb/ I think the problem is the drop-down nav menu on the left. The sub uls expand the width of the top level ul to accommodate them and this is pushing the main content down. If anyone can suggest a solution it would be appreciated. regards, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 The content div needs a width. Try 760px You can 'play' with this live by using a Developer Tool for the browser -Fred Hahnel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ This message contains information which may be confidential and privileged. Unless you are the intended recipient (or authorized to receive this message for the intended recipient), you may not use, copy, disseminate or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and delete the message. Thank you very much. Thanks Fred, that's sorted it, I think. Certainly in Opera and IE8. I knew it had to be something simple. cheers, Mike -- Integra Web Design Braehead, Rhynie, AB54 4LS 01464 861535 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
Mike, I took a look at your site in FF 19.0.2 and Chrome 25.0.1364.172 m both on Win7 and they look identical to me. Could be more specific about where the problem is? Thanks, Eric Miner __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/