Re: [css-d] Navigation bar
[snip]
I am looking for a slightly more 'elegant' way of vertically
centering text depending on whether there are one or two lines.
[snip]
I've also just noticed a problem in all browsers except IE7. What I
want to happen is for the currently selected item to show a different
background and to change text color, as in [ #navbar a:active ]
(below) and for this state to remain until another selection is made.
IE7 does what I want, but other browsers are inconsistent. Some will
show the correct state whilst the mouse button is down and it's
possible in at least one other to select an item and drag the pointer
away from the item whilst holding the button down and the active
state will remain. It's late at night and I've probably missed
something obvious!!
[snip]
/* Set background for current item */ #navbar a:active {
background-image:url(../images/buttons/navactive1x30.gif);
background-repeat:repeat; color:white; }
[snip]
Hi Alan.
I think other browsers are either shifting the focus or not recognizing
the :active state on your link. Try adding the :focus state into that
rule as well, like this:
/* Set background for current item */
#navbar a:active,
#navbar a:focus{
background-image: url(../images/buttons/navactive1x30.gif);
background-repeat: repeat;
color: white;}
It's difficult to fully test that on my local machine because of the
frames (as you mentioned), but I think that should at least get you
closer to a solution.
In terms of vertical centering, one solution is just to use padding and
not rely on pre-determined heights for the links. This also creates an
accessibility issue (overlapping the text when people [like me] have the
font size set too high for your site's setup).
If you create a background image which fades to a specific color, you
can just set the background of the link to that color, center the fade
gif/png/jpg and let any overflow in odd situations show up as a solid color.
Here's a basic ascii'd example:
solid white link background peaking through
white-blue-white vertical fade [one or two lines here]
solid white link background peaking through again
Throw a little padding in there, use a best guess measurement and
it'll look great on 80% of browsers, be accessible on all browsers, and
still look decent on the remaining 20% browsers with configurations
which differ from your local system.
Let me know how it all works out for ya.
Bill Brown
TheHolierGrail.com
MacNimble.com
__
css-discuss [EMAIL PROTECTED]
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] Special how-to request
Keith Kaiser wrote:
On Apr 11, 2008, at 3:42 PM, David Laakso wrote:
Add this to your rt.css style sheet to position the alert (changing
it from the locked inline absolute positioning it had, to a float
called from the CSS makes it easier to position and maintain).
Overflow:hidden combined with the height:1.5em; is what keeps it
from being totally goofy in IE/6 (and does not adversely effect IE/7
or compliant browsers...
#amberalert{
float:left; clear:both; margin-left:40px; overflow:hidden; height:
1.5em;}
I'll let you, The Boy Scouts of America, and the Web decide what to
do about the proprietary code preventing your markup from validating.
hth.
O! That's not looking too bad now.
What proprietary code is that?
Keith please note that I have snip the larger part of this thread. you
the [snip] and reply to the relevant parts. You site is now off-line so
I would not know what David has already helped you with.
Browser reports on what I did see.
Firefox 2 and IE7 and Safari 3: The marquee covers the search button. A
marquee is proprietary code. I don't know what other proprietary code
was there.
Opera. Hovering the dropdowns menus causes the whole content to drop out
of view.
IE8: A disaster. Broken pieces here and there. I would say this is since
you have this.
!--[if IE]
style type=text/css media=screen
#topMenu ul li {float: left; width: 100%;}
#topMenu {height:5em;}
/style
![endif]--
This [if IE] statements will apply the style rules within to every
version of Internet Explorer. Very dangerous.
IE6: The multi marquee is covering the content on the right.
IE5.5: The multi marquee is covering the menu on the left.
The page breaks in every browser when you bump up the text size. I
wouldn't know which browser the page was tested in but adding a Doctype
would have stopped the page being in quirks mode. Even IE8 in quirks
mode appears the same as IE5.5.
As a whole the layout is reasonable and things can be fixed but first
all the mis-targeted [if IE] must go (David has helped you here),
marquee removed, and javascript removed that is not require for the
search button.
The top menu has 213 links (I think). Some of these links you have to
use the mouse scroll wheel while hovering the menu to access the links.
Being at the top I would expect this menu to be the main menu of the
site but you have many external links which should be listed in
un-styled list on there own individual pages. The site navigation seems
to be on the left. Moving on to another page I am presented with this
massive confusing navigation again.
Apart from the browser issues this site is in essence un-accessible. You
would only have a minority of users who would ever browse the site. Most
users would leave straight away.
Some question that could help us help you (***snip above***).
1. Do you have access to the server?
2. Is the server Apache or Windows?
3. How many pages does this domain actuality have?
4. Would you like users who are not into scouting wanting to browse the
site out of interest?
When replying to my question, remove very thing above the words (***snip
above***). Also please keep the site life so others can help. I can't
help at this point on the code since it's off-line.
Alan
http://css-class.com/test/
__
css-discuss [EMAIL PROTECTED]
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] Navigation bar
Alan K Baker wrote: Hi all. I'm in the process of converting an old frames/tables/JavaScript site to all CSS. There many billions of pages needing the same treatment. Please take a look at this screen shot. http://css-class.com/test/images/email-client.png The forth line down run 5 times a wide as my screen. For me to reply to you I first have to edit you message but not the simple way. My email client will wrap my replies at 72 characters length automatically. Discussion about Email clients are off-topic on this list but since your messages are very hard to reply to I have to mentioned them. Here is a good one to use. http://www.mozilla.com/en-US/thunderbird/ It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html I am looking for a slightly more 'elegant' way of vertically centering text Is this the fixed navigation where the lower parts are hidden outside the viewpoint. My screen is on 800px high. Is this navigation within frames? [snip] to save you wading through the dreaded frames maze. Remove the frames as it make it near impossible for anyone to help. At present my text is centered by [ .oneline a ] and [ .twolines a ]. OK, where do you mention that .oneline and .towlines is part of the navigation. Some on this list are good detectives since. We have to use our web developers toolbar [1] outline current element feature to locate these classes. I've also just noticed a problem in all browsers except IE7. That make sense. :-) I've probably missed something obvious!! Yes. When I check you source code all I see is. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes The good browsers are not framed challenged. They just don't use MS propriety garbage code. Help would be much appreciated. Regards, Alan. www.theatreorgans.co.uk So you have to make it easy. :-) Sometimes it is easier just to have un-style text to begin with. [1] https://addons.mozilla.org/en-US/firefox/addon/60 Alan http://css-class.com/ __ css-discuss [EMAIL PROTECTED] 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] Navigation bar
Hello all... I could not help picking up o a bit about IE7, I recently attempted a sidebar for my website, and all now works (to some extent) but for IE7. I was just wondering what is with IE7, IE6 used to be fine, it always worked, same with FF but why is 7 casing so many problems? Andrew Alan Gresley wrote: Alan K Baker wrote: Hi all. I'm in the process of converting an old frames/tables/JavaScript site to all CSS. There many billions of pages needing the same treatment. Please take a look at this screen shot. http://css-class.com/test/images/email-client.png The forth line down run 5 times a wide as my screen. For me to reply to you I first have to edit you message but not the simple way. My email client will wrap my replies at 72 characters length automatically. Discussion about Email clients are off-topic on this list but since your messages are very hard to reply to I have to mentioned them. Here is a good one to use. http://www.mozilla.com/en-US/thunderbird/ It can be found at: http://www.webbwize.co.uk/Test_Area/TEP/index.html I am looking for a slightly more 'elegant' way of vertically centering text Is this the fixed navigation where the lower parts are hidden outside the viewpoint. My screen is on 800px high. Is this navigation within frames? [snip] to save you wading through the dreaded frames maze. Remove the frames as it make it near impossible for anyone to help. At present my text is centered by [ .oneline a ] and [ .twolines a ]. OK, where do you mention that .oneline and .towlines is part of the navigation. Some on this list are good detectives since. We have to use our web developers toolbar [1] outline current element feature to locate these classes. I've also just noticed a problem in all browsers except IE7. That make sense. :-) I've probably missed something obvious!! Yes. When I check you source code all I see is. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes The good browsers are not framed challenged. They just don't use MS propriety garbage code. Help would be much appreciated. Regards, Alan. www.theatreorgans.co.uk So you have to make it easy. :-) Sometimes it is easier just to have un-style text to begin with. [1] https://addons.mozilla.org/en-US/firefox/addon/60 Alan http://css-class.com/ __ css-discuss [EMAIL PROTECTED] 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/ __ css-discuss [EMAIL PROTECTED] 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] Special how-to request
Alan Gresley wrote: Browser reports on what I did see...trimmed] Re: http://bsaroundtable.com/ Clear the cache. __ css-discuss [EMAIL PROTECTED] 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] Navigation bar
Andrew. In the case of my [ :active ] problem, I believe that none of the browsers is actually at fault, and IE7 does actually do what I want and behaves in a way I'd logically expect, which is probably quite unusual for IE7. :-) It's simply a minor discrepancy in implementation between browsers - no big deal. I have far more problems with IE6 than all the other browsers! IE7 is a pussy cat, compared to IE6. g In the case of my vertical spacing on text, this is just my wish to improve my code. It's not a browser fault at all. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Andrew Doades To: Alan Gresley Cc: Alan K Baker ; css-d Sent: Saturday, April 12, 2008 11:48 AM Subject: Re: [css-d] Navigation bar Hello all... I could not help picking up on a bit about IE7, I recently attempted a sidebar for my website, and all now works (to some extent) but for IE7. I was just wondering what is with IE7, IE6 used to be fine, it always worked, same with FF but why is 7 casing so many problems? Andrew __ css-discuss [EMAIL PROTECTED] 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] Navigation bar
I do see what you are saying, but since I went to IE7 I have had no end of problem why trying to develop, also a pain was moving to IE7 from IE6 when developing :) But why do IE and FF seem to have a constant fighting battle for developers? This is what I can't get, I can develop something that looks grate in FF but in IE, or vice versa. But some good points in your email :) Andrew Alan K Baker wrote: Andrew. In the case of my [ :active ] problem, I believe that none of the browsers is actually at fault, and IE7 does actually do what I want and behaves in a way I'd logically expect, which is probably quite unusual for IE7. :-) It's simply a minor discrepancy in implementation between browsers - no big deal. I have far more problems with IE6 than all the other browsers! IE7 is a pussy cat, compared to IE6. g In the case of my vertical spacing on text, this is just my wish to improve my code. It's not a browser fault at all. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Andrew Doades To: Alan Gresley Cc: Alan K Baker ; css-d Sent: Saturday, April 12, 2008 11:48 AM Subject: Re: [css-d] Navigation bar Hello all... I could not help picking up on a bit about IE7, I recently attempted a sidebar for my website, and all now works (to some extent) but for IE7. I was just wondering what is with IE7, IE6 used to be fine, it always worked, same with FF but why is 7 casing so many problems? Andrew __ css-discuss [EMAIL PROTECTED] 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/ __ css-discuss [EMAIL PROTECTED] 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] Navigation bar
Alan. As there are a few issues here and interaction will be improved (IMO) I am replying to your message, by interspersing my replies within yours. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Alan Gresley To: Alan K Baker Cc: css-d Sent: Saturday, April 12, 2008 10:09 AM Subject: Re: [css-d] Navigation bar There many billions of pages needing the same treatment. Please take a look at this screen shot. Answered privately. Is this the fixed navigation where the lower parts are hidden outside the viewpoint. My screen is on 800px high. Is this navigation within frames? No, it's apparent on any button that's clicked. They all behave in the same way. Remove the frames as it make it near impossible for anyone to help. The frames will be removed, but the site is presented 'as-is' to allow you guys to see the problem, not for you to attempt to retrieve code from it. That's why I posted the relevant code in my message. OK, where do you mention that .oneline and .twolines is part of the navigation. Some on this list are good detectives since. We have to use our web developers toolbar [1] outline current element feature to locate these classes. It's mentioned in the line I've included the appropriate part of the stylesheet and the HTML below, to save you wading through the dreaded frames maze. At present my text is centered by [ .oneline a ] and [ .twolines a ] (below)., which you've edited out. :-) I've probably missed something obvious!! Yes. When I check you source code all I see is. frameset frame frame base /frameset noframes If you are reading this text, your browser is frames challenged. More up to date browsers are readily available. /noframes The good browsers are not framed challenged. They just don't use MS propriety garbage code. 'Fraid I disagree. Frames have been around for a long time, along with all their faults. None of today's reasonably up-to-date browsers has a problem with the site as it is/was. M$ proprietary code is here to stay and the greater majority of browser public are using it, unfortunately for us, especially in the case of browsers below IE7, which itself is far from perfect. Not to labor a point, as we're getting off topic, but the frames will be removed soon and the problem will cease to exist. :-) So you have to make it easy. :-) Sometimes it is easier just to have un-style text to begin with. The only way I could make it any easier (as you say) is to remove the frames, but really this is totally unnecessary. I've already posted the relevant code in my message, for inspection. There's nothing 'hidden' on the live site that would affect it. I dumped the site to a test area, merely as an illustration for this forum, so that the effects can be seen. Hell, being a USA originated forum, I even spelled my message in 'American' and ignored the protests of my UK spell-checker. grin __ css-discuss [EMAIL PROTECTED] 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] what is with IE7 (was Navigation bar)
Andrew Doades wrote: Hello all... I could not help picking up o a bit about IE7, I recently attempted a sidebar for my website, and all now works (to some extent) but for IE7. I was just wondering what is with IE7, IE6 used to be fine, it always worked, same with FF but why is 7 casing so many problems? Andrew You top posted there Andrew. :-) IE7 in many case will render a page similar to the good browsers but it is not a CSS2.1 or even CSS1 stand compliant browser. You could say that IE7 is the piggy in the middle. IE6 and earlier on the left and IE8 on the right. What MS is doing with IE8 should have happen with IE7. Depending on what the code is like, IE6 will show a total disaster or show sort of pretty. Alan http://css-class.com/ __ css-discuss [EMAIL PROTECTED] 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] code inside pre results in smaller computed font-size in FF
Pentasis wrote:
Can anyone tell me why this happens?
The HTML looks like this:
body
precodesome text/code/pre
/body
If the CSS is like:
body {
font-size: 0.875em; /* computes to 14px */
line-height: 1.5em;
}
pre {
font-family: Consolas, Courier New, Courier, monospace;
white-space: pre;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
margin: 3em 1.5em;
padding: 0em 1.5em;
}
code {
font-family: Consolas, Courier New, Courier, monospace;
}
Everything is fine and it looks the same in IE, FF, Safari and Opera.
However, when I remove the font-family from the pre selector, Firefox
reduces the font size to a computed value of 11.4px
I would presume that it how Gecko shows the height of the glyphs in the
code element by default. This is what Mozilla developers have.
The HTML Code Element produces an inline element displayed in the
browser's default monotype font (Lucida Console).
These links will help.
http://developer.mozilla.org/en/docs/HTML:Element:code
http://developer.mozilla.org/en/docs/Category:HTML:Element_Reference
Alan
http://css-class.com/
__
css-discuss [EMAIL PROTECTED]
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] Centering image h/v in *smaller* div
At 16:40 -0500 11/4/08, Benjamin White wrote: 1.) Could you not just render these particular links as block elements, either by floating them or explicitly declaring display: block and then setting the background to whatever image you need? Ideally you would then use the alternate text as the link text and hide it from traditional browsers in some way. Good idea! Anyway, thanks to everyone for your input - I'll figure something out. BestMartin __ css-discuss [EMAIL PROTECTED] 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] code inside pre results in smaller computed font-size in FF
On Sat, Apr 12, 2008 at 8:46 AM, Pentasis [EMAIL PROTECTED] wrote:
Can anyone tell me why this happens?
The HTML looks like this:
body
precodesome text/code/pre
/body
If the CSS is like:
body {
font-size: 0.875em; /* computes to 14px */
line-height: 1.5em;
}
Hah! I was dealing with precisely this problem a little while ago in
my as yet unfinished site redesign. I've been collecting notes to
write a post about it as soon as I get the redesign up (it won't make
any sense until then). I'm even using the same math as you.
Here's the trick: both the code and pre elements are rendered by
Firefox as monospace if you do not set a font-family. Since the
default setting is to display monospaced fonts at 13px instead of 16px
you end up with a font that is reduced from 13px (13px x 0.875 =
11.4px).
What I ended up doing was adding font-family: inherit to my pre
styles. I guess it works if you define an actual font too.
__
css-discuss [EMAIL PROTECTED]
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] code inside pre results in smaller computed font-size in FF
On 2008/04/12 16:46 (GMT+0300) Pentasis apparently typed: Everything is fine and it looks the same in IE, FF, Safari and Opera. However, when I remove the font-family from the pre selector, Firefox reduces the font size to a computed value of 11.4px NAICT, Opera IE match each other, but both Gecko and Webkit do their own things: http://fm.no-ip.com/auth/tmp/pentasis.html http://fm.no-ip.com/SS/Fnt/pentasis-pre-code1.jpg I have all 4 of those browsers set entirely to defaults, except for replacing all instances of Courier* with DejaVu Sans Mono. FWIW, in case you haven't noticed, Consolas tends to render narrower than other monospace fonts, while most monospace fonts match in width at most sizes. Whether it does or not depends on the particular font compared to, DPI, the size being compared, and possibly the rendering engine of the OS. http://fm.no-ip.com/auth/Font/fonts-face-samplesM.html http://fm.no-ip.com/auth/Font/fontm-consolas.html http://fm.no-ip.com/SS/Fnt/fonts-compvista-consolasXP.png -- Either the constitution controls the judges, or the judges rewrite the constitution. Judge Robert Bork Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [EMAIL PROTECTED] 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/
[css-d] Building a completely CSS, UL based, dropdown menu
Hey Everyone, I've been building a drop-down menu system for a client. So-far the menu is getting close to acceptable in Firefox 2.0 and Safari, but it looks horrible in IE6. Does anyone have any tips off-hand for making things work a little more smoothly in IE6? *You can see the dev version of the site here if you're interested:* http://www.openmindspace.org/cwda/ *Style-sheet is here:* http://www.openmindspace.org/cwda/style.css Thanks, Chris __ css-discuss [EMAIL PROTECTED] 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] when are 2 external css called for?
At 9:53 PM -0400 4/11/08, Kepler Gelotte wrote: I get the idea of different names of styles, but the actual implementation I'm not so sure of how to do. Hi John, I created two example test pages (home.html, about.html) to illustrate the technique: http://www.neighborwebmaster.com/tests/home.html Kepler: Nice demo. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] 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/
[css-d] mystery gap in Firefox
I'm working on some fixups for a site originally done by somebody else. In IE, the submenus were appearing off to the right, so I wrapped them in another DIV with position: relative and set 'left: 0; top: 40px' (40 being the height of the image that the submenu appears from) on the submenu. This works great in IE. However, it's now acting weird in both FF2 and FF3. The submenu is offset vertically ~30px from the bottom of the image, and I can't figure out what's going on here. Thanks for any help. URL: http://www.ctstlouis.com/index.php Stylesheet: http://www.ctstlouis.com/ctstlouis.css -- Andrew Gaffney agaffney.org __ css-discuss [EMAIL PROTECTED] 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] mystery gap in Firefox
On Apr 13, 2008, at 10:35 AM, Andrew Gaffney wrote: I'm working on some fixups for a site originally done by somebody else. In IE, the submenus were appearing off to the right, so I wrapped them in another DIV with position: relative and set 'left: 0; top: 40px' (40 being the height of the image that the submenu appears from) on the submenu. This works great in IE. However, it's now acting weird in both FF2 and FF3. The submenu is offset vertically ~30px from the bottom of the image, and I can't figure out what's going on here. Thanks for any help. URL: http://www.ctstlouis.com/index.php Stylesheet: http://www.ctstlouis.com/ctstlouis.css And in Safari, and in Opera, you get the same as with Gecko. Why do you set the div.menucontainer to display:inline ? Setting it to display:block would solve your positioning problem in those browsers. The image doesn't affect the height of a (parent) inline element as you seem to expect. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] 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] mystery gap in Firefox
Philippe Wittenbergh wrote: On Apr 13, 2008, at 10:35 AM, Andrew Gaffney wrote: I'm working on some fixups for a site originally done by somebody else. In IE, the submenus were appearing off to the right, so I wrapped them in another DIV with position: relative and set 'left: 0; top: 40px' (40 being the height of the image that the submenu appears from) on the submenu. This works great in IE. However, it's now acting weird in both FF2 and FF3. The submenu is offset vertically ~30px from the bottom of the image, and I can't figure out what's going on here. Thanks for any help. URL: http://www.ctstlouis.com/index.php Stylesheet: http://www.ctstlouis.com/ctstlouis.css And in Safari, and in Opera, you get the same as with Gecko. Actually, I was seeing the IE7 behavior in Opera 9.50 beta in linux. Why do you set the div.menucontainer to display:inline ? Setting it to display:block would solve your positioning problem in those browsers. I can't seem to remember why I put that in. I recall it being an attempt to fix some other quirk I was seeing, but I don't remember what. Removing the display:inline does indeed fix it. Thanks. The image doesn't affect the height of a (parent) inline element as you seem to expect. I guess not :) -- Andrew Gaffney agaffney.org __ css-discuss [EMAIL PROTECTED] 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/
