homepage Welcome to WebmasterWorld Guest from 54.145.243.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
Firefox overflow DIV context menu horizontal scrollbar
Firefox Bug...
JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 238 posted 11:01 pm on Mar 3, 2005 (gmt 0)

I've redone a person's site using XHTML 1.1 strict, all DIVs, all W3 compliants, etc.

Their site is a DIV about 600x400 with a DIV set to overflow: scroll that is about 300px wide and floats on the right.

Now when I right click Firefox ADDS a pixel to the border and I get a horizontal scrollbar in the body DIV which is the outermost border...

<snip>

That page is a work around by trying to reduce the body div's width or increase it when the context menu is pressed. However this doesn't work around it like I hoped.

Any suggestions? This really hurts Firefox's reputation for people who will go to his site if I don't fix this.

[edited by: BlobFisk at 12:17 am (utc) on Mar. 4, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 238 posted 1:18 pm on Mar 10, 2005 (gmt 0)

when I right click Firefox ADDS a pixel to the border

I'm not sure I understand this correctly - the screen actually redraws when you right click?

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 238 posted 5:43 pm on Mar 10, 2005 (gmt 0)

When you right click in an overflow DIV it adds a pixel and a horizontal scrollbar appears.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DJ Lucent - Site</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<script src="scripts/script-target.js" type="text/javascript"></script>
<style>
a.menu {
font-size: 16px;
}
body {
font-size: 12px;
}
div.body {
border: 2px solid #000;
height: 400px;
left:50%;
margin-left: -340px;
margin-top: -200px;
position: absolute;
overflow: auto;
text-align: center;
top:50%;
vertical-align: middle;
width: 640px;
}
div.body-h {
border: 2px solid #000;
height: 400px;
left:50%;
margin-left: -340px;
margin-top: -200px;
position: absolute;
overflow: auto;
text-align: center;
top:50%;
vertical-align: middle;
width: 650px;
}
div.center {
border: 11px;
text-align: center;
}
div.content {
border: solid #000;
border-width: 0px 0px 0px 2px;
float: right;
height: 392px;
overflow: auto;
padding: 4px 4px 4px 4px;
text-align: left;
width: 286px;
}
div.logo {
background-image: url("images/interface-logo.gif");
background-repeat: no-repeat;
height: 79px;
position: absolute;
left: 50px;
top: 150px;
width: 276px;
}
div.menu {
border-style: dotted;
border-width: 0px 0px 8px 0px;
}
div.bio, div.bio-h, div.events, div.events-h, div.home, div.home-h, div.music, div.music-h, div.photos, div.photos-h, div.site, div.site-h{
background-repeat: no-repeat;
height: 100px;
position: absolute;
width: 100px;
}
div.bio {
background-image: url("images/menu-bio.gif") ;
left: 10px;
top: 10px;
}
div.bio-h {
background-image: url("images/menu-bio-ro.gif") ;
left: 10px;
top: 10px;
}
div.events {
background-image: url("images/menu-events.gif") ;
bottom: 10px;
left: 10px;
}
div.events-h {
background-image: url("images/menu-events-ro.gif") ;
bottom: 10px;
left: 10px;
}
div.home {
background-image: url("images/menu-home.gif") ;
bottom: 10px;
left: 230px;
}
div.home-h {
background-image: url("images/menu-home-ro.gif") ;
bottom: 10px;
left: 230px;
}
div.music {
background-image: url("images/menu-music.gif") ;
left: 230px;
top: 10px;
}
div.music-h {
background-image: url("images/menu-music-ro.gif") ;
left: 230px;
top: 10px;
}
div.photos {
background-image: url("images/menu-photos.gif") ;
left: 120px;
top: 10px;
}
div.photos-h {
background-image: url("images/menu-photos-ro.gif") ;
left: 120px;
top: 10px;
}
div.site {
background-image: url("images/menu-site.gif") ;
bottom: 10px;
left: 120px;
}
div.site-h {
background-image: url("images/menu-site-ro.gif") ;
bottom: 10px;
left: 120px;
}
h1, h2, h3, h4, h5, h6 {
display: inline;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 10px;
}
h6 {
font-size: 8px;
}
img {
border: 0px;
}
img.logo {
height: 79px;
width: 276px;
}
img.menu {
height: 100px;
width: 100px;
}
p {
font-family: tahoma;
font-size: 12px;
text-align: justify;
text-indent: 1.5em;
}
p.navigation {
font-family: tahoma;
font-size: 16px;
text-indent: 0em;
}
</style>
</head>

<body>

<div class="center">
<div class="body">

<div class="logo"><img src="images/interface-transparency.gif" alt="" class="menu" /></div>
<div class="bio" onmouseover="this.className='bio-h'" onmouseout="this.className='bio'"><a href="bio.html"><img src="images/interface-transparency.gif" alt="" class="menu" /></a></div>
<div class="photos" onmouseover="this.className='photos-h'" onmouseout="this.className='photos'"><a href="photos.html"><img src="images/interface-transparency.gif" alt="" class="menu" /></a></div>
<div class="music" onmouseover="this.className='music-h'" onmouseout="this.className='music'"><a href="music.html"><img src="images/interface-transparency.gif" alt="" class="menu" /></a></div>
<div class="events" onmouseover="this.className='events-h'" onmouseout="this.className='events'"><a href="events.html"><img src="images/interface-transparency.gif" alt="" class="menu" /></a></div>
<div class="site-h"><a href="site.html"><img src="images/interface-transparency.gif" alt="" class="menu" /></a></div>
<div class="home" onmouseover="this.className='home-h'" onmouseout="this.className='home'"><a href="home.html"><img src="images/interface-transparency.gif" alt="" class="menu" /></a></div>

<div class="content">
<div class="menu">
<p class="navigation"><a href="http://www.example.com" class="menu">Text</a> - <a href="site.html">Site</a></p>
</div>
<br />
<a href="contact.html">Contact</a>
<br />
<br />
<a href="guestbook-sign.html">Sign Guest Book</a>
<br />
<br />
<a href="guestbook.html">View Guest Book</a>
<br />
<br />
<a href="links.html">Links</a>
<br />
<br />
<br />
<br />
<a href="http://example.com/guestbook/2462157265/" rel="external">Old Guestbook</a><a href="links.html">
<br />
<br />
Original Design: <a href="http://www.example.com" rel="external">example.com</a>
</div>

</div>
</div>

</body>
</html>

[edited by: BlobFisk at 5:53 pm (utc) on Mar. 10, 2005]
[edit reason] Please use example.com - no URLs. [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved