Re: [css-d] firefox problem
2009/7/7 Tri-State AdVantage k...@tristateadvantage.com: I cannot get this page to read correctly in Firefox. http://www.hcam.net/posts.html The obvious first thing to fix is the Doctype. HTML 4.01 Transitional with no URL triggers Quirks Mode, which introduces all sorts of inconsistencies between browsers, especially when it comes to CSS and error recovery. http://www.cs.tut.fi/~jkorpela/quirks-mode.html Transitional is for legacy documents anyway, switch to: !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; The second thing to deal with is the syntax errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hcam.net%2Fposts.htmlcharset=%28detect+automatically%29doctype=Inlinegroup=0 Once you've dealt with the machine detectable errors, then start worrying about browsers rendering things other than as you expect. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ css-discuss [cs...@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] firefox problem
At 15:55 +0100 on 07/08/2009, David Dorward wrote about Re: [css-d] firefox problem: The second thing to deal with is the syntax errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hcam.net%2Fposts.htmlcharset=%28detect+automatically%29doctype=Inlinegroup=0 Once you've dealt with the machine detectable errors, then start worrying about browsers rendering things other than as you expect. They are NOT syntax errors per-sa but harmless Markup from his WebDesign program. They can be automatically eliminated from the copy uploaded to the Web Site (while leaving them in the master copy on his computer) by having the WebDesign program create a clean copy for manual uploading or having it clean the copy it uploads itself. This is the same type of crud that Office creates when it outputs HTML so that the HTML can be round-trip read back into Office as if it were a .DOC not a .HTM/.HTML format file. There are no REAL (ie: HTML statement) syntax errors there only non-HTML tags. -- Bob Rosenberg RockMUG Webmaster webmas...@rockmug.org www.RockMUG.org __ css-discuss [cs...@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/
[css-d] firefox problem
I cannot get this page to read correctly in Firefox. http://www.hcam.net/posts.html I got it to work correctly in Explorer by putting a wide border on the right hand side of the photo so that the discription is pushed below the photo. That is not working in Firefox and the paragraph is over the photo. I would appreciate some tips on how to make it work in Firefox with out causing problems in Explorer. here is a link to my style sheet. http://www.hcam.net/newstyles.css Thank you Kris J __ css-discuss [cs...@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] firefox problem
On 8/07/2009, at 7:44 AM, Tri-State AdVantage wrote: I cannot get this page to read correctly in Firefox. http://www.hcam.net/posts.html I got it to work correctly in Explorer by putting a wide border on the right hand side of the photo so that the discription is pushed below the photo. You mention a wide 'border' but what I see is a 750px right hand 'margin' on the image. This is apparent in IE8/7/6. Perhaps you could describe the effect that you want to achieve or show us a screenshot of the design? I'm always suspicious any time someone says that it works in IE but not in Firefox. Firefox (and every other major non-IE browser) has superior CSS rendering capabilities so if it doesn't work in Firefox there's a good chance that you are doing something wrong. I would recommend always making your site work in the non-IE browser of your choice and *then* do what is required to make IE get in line. Firefox has some great developer tools like firebug etc. so that is my choice but you could equally use the latest versions of Opera, Chrome or Safari. In most cases you will find that if you do things right your site will render correctly and similarly in all these browsers and you won't have to change anything. Use conditional comments to isolate the rules required to get the various flavours of IE into line. IE8 is actually quite good as far as CSS 2 is concerned so as long as you are not triggering it into 'compatibility mode' you generally shouldn't need to hack for IE8 either. __ css-discuss [cs...@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] firefox problem
Tri-State AdVantage wrote: I cannot get this page to read correctly in Firefox. http://www.hcam.net/posts.html Kris J There is nothing wrong with Firefox. There is a lot wrong with your coding practices :-) . Code to Opera, FF, Safari, and IE/8. IE/7 will go along with the program. Fix (hack) IE/6. Once you have a functional, usable, cross-browser reliable basic structure working, someone can help with the trivial matters. This is a first step toward that goal. http://chelseacreekstudio.com/ca/cssd/fixed/fixed.html Position:fixed; is not supported in IE/6. The workaround used is here: http://www.gunlaug.no/contents/wd_additions_15.html See also: http://www.satzansatz.de/cssd/onhavinglayout.html __ css-discuss [cs...@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/
[css-d] Firefox problem with flyout menus
Hi folks, Before I ask for help, let me warn everyone that the code I'm about to point you to does not validate. And I do not (at the moment) have access/permission to make it so. But if you're willing to take a look, I'd appreciate any opinions on the problem. It involves the integration of a CSS/Javascript menu generated by OpenCube's QuickMenu. I have contacted their support regarding the issue; but the problem seems not to be in their code, but in its interaction with other styling or Javascript within the page. And it's creating an effect I've never seen before. You may view an example at http://sitedirectorcssdev4.quilldesign.com. In IE 6 and 7, and in Safari, the drop-down/flyout menus which descend from Category 1 and Category 2 work correctly. But in Firefox, on both Mac and PC, the sub-menus will often disappear even while hovered over. Typical behavior is for the menus to appear correctly to start with, then begin to disappear as one moves around. For example, start with Category 1, then go to Sub-Category 3, then move out to Sub-sub-category Five. I know I'm asking for help on something that can't be tested properly at the moment. I'm just hoping it's something that someone may have run into previously, and can point me in a direction for troubleshooting. Thanks in advance for any suggestions. -- Thanks, Tom Tom McNeer MediumCool http://www.mediumcool.com 1735 Johnson Road NE Atlanta, GA 30306 404.589.0560 __ 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] Firefox problem with flyout menus
Tom McNeer wrote: Hi folks, Before I ask for help, let me warn everyone that the code I'm about to point you to does not validate. And I do not (at the moment) have access/permission to make it so. But if you're willing to take a look, I'd appreciate any opinions on the problem. It involves the integration of a CSS/Javascript menu generated by OpenCube's QuickMenu. I have contacted their support regarding the issue; but the problem seems not to be in their code, but in its interaction with other styling or Javascript within the page. And it's creating an effect I've never seen before. You may view an example at http://sitedirectorcssdev4.quilldesign.com. In IE 6 and 7, and in Safari, the drop-down/flyout menus which descend from Category 1 and Category 2 work correctly. But in Firefox, on both Mac and PC, the sub-menus will often disappear even while hovered over. Typical behavior is for the menus to appear correctly to start with, then begin to disappear as one moves around. For example, start with Category 1, then go to Sub-Category 3, then move out to Sub-sub-category Five. I know I'm asking for help on something that can't be tested properly at the moment. I'm just hoping it's something that someone may have run into previously, and can point me in a direction for troubleshooting. Thanks in advance for any suggestions. There are two nested boxes following the header with the menu in question, #main and #twocolumn. both have overflow:hidden set, probably to contain floats, the easy way (the buggy way, I should add). But Firefox seems to loose track on the menu once the mouse hovers a position above the overflow area. Your script just slows down the effect. Open your page with Firebug and highlight #twocolumn, then let the mouse gently move towards the borderline. In Firebug, remove overflow:hidden from both and use display:table instead, for debugging. You will have to choose another containing floats method. I'd suggest starting with a solid clearer, or using the easyclearing method. Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] Firefox problem with flyout menus
Ingo, Thanks very, very much for your explanation. I didn't actually see anything happen in Firebug when I selected #twocolumn and moved my mouse near the borderline. What should I have seen? But of course, your solution worked. I'm very grateful. Just to be clear: the CSS in those divs is part of a pre-built commerce package, whose author I'm doing some work for. He freely admits that the current CSS is a mess, and has a project going to build far better templates. So we'll need to see what, if any, effect the change in those attributes has in other areas (the person who built the existing CSS is long gone). But now we know the problem. And I'm very appreciative for your help. -- Thanks, Tom Tom McNeer MediumCool http://www.mediumcool.com 1735 Johnson Road NE Atlanta, GA 30306 404.589.0560 __ 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] Firefox problem with flyout menus
Tom McNeer wrote: Ingo, Thanks very, very much for your explanation. I didn't actually see anything happen in Firebug when I selected #twocolumn and moved my mouse near the borderline. What should I have seen? It was just a debugging note. When hovering over the submenu, the mouse looses focus once this imaginary borderline is passed, and your menu collapses. This wrong behavior is independent from the chosen text-zoom. Enlarge the text by one step in Firefox 2, the menu still collapses on the same borderline. So the problem could not be found in the menu entries or its scripting, but in its underlying structures. But of course, your solution worked. I'm very grateful. Just to be clear: the CSS in those divs is part of a pre-built commerce package, whose author I'm doing some work for. He freely admits that the current CSS is a mess, and has a project going to build far better templates. So we'll need to see what, if any, effect the change in those attributes has in other areas (the person who built the existing CSS is long gone). But now we know the problem. And I'm very appreciative for your help. Glad I could help. Again, any other containing floats technique should do. thanks, Ingo -- http://www.satzansatz.de/css.html http://www.dolphinsback.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] FireFox problem?
Can anyone spot what I'm doing wrong here: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It renders exactly how I want it to in Opera and Konqueror. It's OK in IE6 - a bit odd, but acceptable. It's all over the place in FireFox, which seems to push some of the paragraphs down such that the first line of the paragraph doesn't line up with the floated image. Both the HTML and the CSS validate OK. The CSS is at: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It's up on a test server at the moment, so if the images take a bit to download, please be patient. This is the first time I've ever come across something that's OK in Opera and Konq, but not in FF, so I'm sure I'm just missing something blindingly obvious. Many thanks Peter __ 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] FireFox problem?
Peter Bradley wrote: Can anyone spot what I'm doing wrong here: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It renders exactly how I want it to in Opera and Konqueror. It's OK in IE6 - a bit odd, but acceptable. It's all over the place in FireFox, which seems to push some of the paragraphs down such that the first line of the paragraph doesn't line up with the floated image. Both the HTML and the CSS validate OK. The CSS is at: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html It's up on a test server at the moment, so if the images take a bit to download, please be patient. This is the first time I've ever come across something that's OK in Opera and Konq, but not in FF, so I'm sure I'm just missing something blindingly obvious. Many thanks Peter Mac OS X 10.4.1 FF/2.0.0.14 Opera/9.27 IE/6.0 I viewed your page in with three browsers on the screen adjacent to each other at the same time. I see /no/ variation among them other than minor differences in leading. In IE/6, the second image from the top is not filling its entire height which makes for a little more difference for that browser (good idea to always set both the height and width of images in the markup for IE). Ain't nobody gonna be running around with a pixel ruler checking line-height cross-browser... Any major difference you may be encountering in Firefox, imo, may be due to an errant font setting in your FF browser preferences. -- http://chelseacreekstudio.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] FireFox problem?
Peter Bradley wrote:
http://www.peredur.uklinux.net/PlaceForWords/case-studies.html
This is the first time I've ever come across something that's OK in
Opera and Konq, but not in FF, so I'm sure I'm just missing something
blindingly obvious.
All browsers at my end show the same.
If you want the paragraph-text to line up with the image, you'll have to
zero out the top margin, like so...
#content p.thumbnaillist {
font-size: 90%;
margin-top: 0;
}
...(pay attention to the added specificity).
I'll also suggest the following additions/modifications...
.thumbnailleft {
clear: left;
}
div.temp {
clear:both;
font-size: 1px;
line-height: 0;
height: 0;
overflow: hidden;
}
...to make sure all browsers keep things in line.
regards
Georg
--
http://www.gunlaug.no
__
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] FireFox problem?
Peter Bradley wrote: http://www.peredur.uklinux.net/PlaceForWords/case-studies.html This is the first time I've ever come across something that's OK in Opera and Konq, but not in FF, so I'm sure I'm just missing something blindingly obvious. All browsers at my end show the same. I checked it in FF and it looks fine. However, in IE7, the Menu/links on the left are all messed up. The boxes are quite narrow (they appear to be the right length) so the words do not fit inside, as you move down the menu the boxes are all presented before the Contact and Mailing Del __ 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] FireFox problem?
Ysgrifennodd Gunlaug Sørtun:
snip /
All browsers at my end show the same.
If you want the paragraph-text to line up with the image, you'll have to
zero out the top margin, like so...
#content p.thumbnaillist {
font-size: 90%;
margin-top: 0;
}
...(pay attention to the added specificity).
Yes. That's what I wanted. It's what I get in Opera, IE6 and Konq (all
on Linux). FF is the only one this end that doesn't do that. I checked
FF on Windows as well and it's the same - so I implemented your fix
above, and all is well. I don't understand why the added specificity
was needed, though. Could you explain that to me, please?
I'll also suggest the following additions/modifications...
.thumbnailleft {
clear: left;
}
div.temp {
clear:both;
font-size: 1px;
line-height: 0;
height: 0;
overflow: hidden;
}
...to make sure all browsers keep things in line.
I'm onto it as we speak.
:)
Many thanks to both you and David.
Cheers
Peter
__
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] FireFox problem?
Ysgrifennodd Del Wegener:
I checked it in FF and it looks fine. However, in IE7, the Menu/links
on the left are all messed up.
The boxes are quite narrow (they appear to be the right length) so
the words do not fit inside, as you move down the menu the boxes are
all presented before the Contact and Mailing
Del
It does too. I'd not checked IE7, foolishly thinking that if it was OK
in standards browsers and IE6, it'd be OK in IE7. I haven't got a clue
what to do about this ...
Ah! Fixed it (I think). There's a mistake in my conditional comments.
I've got:
!--[if lte IE 7]
style
/* for IE/6 */
ul#c1 li a {
height : 0;
}
ul#c2 li a {
height : 0;
}
/style
![endif]--
I need !--[if lt IE 7] ...
Works for this page, anyhow. So I'll do the others and see how we go.
Many thanks for pointing that out. Saved my blushes a bit there, I think.
Cheers
Peter
__
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] FireFox problem?
Peter Bradley wrote:
I don't understand why the added specificity was needed, though.
Could you explain that to me, please?
Necessary in order to override the paragraph-styles you have higher up
in the stylesheet...
#content p {
margin : 20px 30px 20px 0;
}
Georg
--
http://www.gunlaug.no
__
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] FireFox problem?
Ysgrifennodd Gunlaug Sørtun:
#content p {
margin : 20px 30px 20px 0;
}
Georg
D'oh.
I forgot. IDs count more than classes, don't they.
Half a day of my life wasted for forgetting that!
Thanks a million Georg.
Peter
__
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] FireFox problem?
Peter Bradley wrote: I forgot. IDs count more than classes, don't they. Yes, and specificity gets strengthen by adding parents/grandparents to the selector-chain. You can go all the way back to the root (html) if necessary, and add even more specificity and fine-tune targeting by including whatever ids and classes you have made available for such a selector-chain. Advice: start low on specificity, and add more only when needed - not before, otherwise you may end up with unnecessary long selector-chains. Half a day of my life wasted for forgetting that! Make sure you don't forget that now, and you may end up with spare time as a reward :-) Georg -- http://www.gunlaug.no __ 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] FireFox problem?
Ysgrifennodd Del Wegener: I rechecked both FF and IE7 and they are now fine. Good looking page. Del Better looking now, thanks to you and the others! :) Many thanks. Peter __ 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] Firefox problem
Much as I hate to say this, because I know I'm opening a can of worms for meself, Firefox seems to have a problem. On this site http:// www.lorettosedgwick.org, I'm seeing most other browsers hold it pretty well on the lower third of the page (the three columns in a box and the footer.) I don't have access to MSIE 7. However, it's breaking up totally in Firefox. I've used the outline command to check out the divs, and they're not following the rules I've set down for each to be 30% of the total width of the innerwrap. It's driving me nuts(ier)! I've checked out the site on the HTML validator, and there are a couple of things it's saying that I don't understand (aside from not liking the way that Dreamscape inserts a Flash element). Any help is GREATLY appreciated! Thank you, ;-Dave __ 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] Firefox problem
On 9/12/07, Dave Pierce [EMAIL PROTECTED] wrote:
Much as I hate to say this, because I know I'm opening a can of worms
for meself, Firefox seems to have a problem.
Yep, and the problem seems to be a typo in your source.
Line 116 reads:
*html #textright {mar\gin: .5em .5em 0em 1em}
I believe it ought to look more like this:
* #textright, html #textright {mar\gin: .5em .5em 0em 1em}
In any event, that *html shouldn't be there; Firefox never even
parses any of the styles after line 115, that's why thinks are looking
funky.
Hope that helps!
:Dan Dorman
__
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] Firefox problem
Dan,
You got the answer, just not the way you think you did.
The line *html #textright {mar\gin: .5em .5em 0em 1em} is a MSIE
hack, and isn't a problem with Firefox.
The problem was that it was like this: *html #textright (mar\gin: .
5em .5em 0em 1em}...the first bracket was a parenthesis instead of a
bracket. I nevr clamied to be a typits! ;-))
You made me look in the right place, anyhow...Thank you!
;-Dave
__
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] Firefox problem with menu's
Ok I found the problem it was all to do with the resizing and the fact that the header had a fixed height and overlaid the Menu. Set height to auto and the problem went away. Not sure why you think I should be using XHTML as extension, browsers should be using the DOCTYPE to work out what to do not the extension. What about my PHP site's. All the pop-up blockers I have in my browsers allow it. It is something to do with on and off site. I use Opera as my main browser. I'm rethinking my resizing, it is necessary. Most site I find I cannot read at my screen resolution and I use Opera's zoom all the time (it helps to have a mouse with zoom buttons). But as we roll out more web 2.0 stuff JavaScript is essential. The default font-size works OK fine in 800x600 screens, maybe I should wake up to the fact that these days the minimum is 1024x768. Thanks for the feed back. Regards, Nic -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Hucklesby Sent: 09 June 2007 17:08 To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org Subject: Re: [css-d] Firefox problem with menu's On Thu, 7 Jun 2007 13:31:38 +0100, Nic Pulford wrote: http://lasadev.com/NewLasa/articles.htm now try and click on the menu link for home. On my version of firefox 2.0.0.4 you only get the hand cursor when the cursor is about level with and only over the area equivalent to an underline. Which is not very good for anybody yet alone poor mouse users. Hi Nic, I am not seeing this problem here - FF 2.0.0.4 on Win xp Pro. The other problem is with the popup window that is opened if you click on one of the links to articles from the page above. There neither of the menu links work at all, no mouseover and click does nothing. I get the popup, too! It looks like your problem is local to your test setup. :\ There are some problems that I do see, however: - If JavaScript is disabled, I get a font size of 8px. That's equivalent to a point size of 4pt on my laptop. Almost invisible. - The popup text displays at 10px - 6pt equivalent here. That's a bit small for comfort, especially on a complete article. - You have a file name suffix of .htm so, absent some clever server- side tricks, browsers see HTML. But your DOCTYPE is XHTML 1.1 which is intended to be displayed as XHTML only. I suggest using a file name suffix of .xhtml[1] or use XHTML 1.0. - I'd also suggest using regular links in place of a popup. With the increasing popularity of popup blockers, visitors are likely to have problems with accessing the articles. IE and Opera are OK. But Opera has a built-in popup blocker. The Google toolbar adds one to IE. I am also getting the same teensy text with JS turned off. (FWIW - I usually turn off JS when visiting sites unknown.) [1] But note that IE (alone) can't handle such files. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem with menu's
On Thu, 7 Jun 2007 13:31:38 +0100, Nic Pulford wrote: http://lasadev.com/NewLasa/articles.htm now try and click on the menu link for home. On my version of firefox 2.0.0.4 you only get the hand cursor when the cursor is about level with and only over the area equivalent to an underline. Which is not very good for anybody yet alone poor mouse users. Hi Nic, I am not seeing this problem here - FF 2.0.0.4 on Win xp Pro. The other problem is with the popup window that is opened if you click on one of the links to articles from the page above. There neither of the menu links work at all, no mouseover and click does nothing. I get the popup, too! It looks like your problem is local to your test setup. :\ There are some problems that I do see, however: - If JavaScript is disabled, I get a font size of 8px. That's equivalent to a point size of 4pt on my laptop. Almost invisible. - The popup text displays at 10px - 6pt equivalent here. That's a bit small for comfort, especially on a complete article. - You have a file name suffix of .htm so, absent some clever server- side tricks, browsers see HTML. But your DOCTYPE is XHTML 1.1 which is intended to be displayed as XHTML only. I suggest using a file name suffix of .xhtml[1] or use XHTML 1.0. - I'd also suggest using regular links in place of a popup. With the increasing popularity of popup blockers, visitors are likely to have problems with accessing the articles. IE and Opera are OK. But Opera has a built-in popup blocker. The Google toolbar adds one to IE. I am also getting the same teensy text with JS turned off. (FWIW - I usually turn off JS when visiting sites unknown.) [1] But note that IE (alone) can't handle such files. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox problem with menu's
Hi, I'm just updating a site and having problems with the way it is handling my navigation links. There are two pages concerned. http://lasadev.com/NewLasa/articles.htm now try and click on the menu link for home. On my version of firefox 2.0.0.4 you only get the hand cursor when the cursor is about level with and only over the area equivalent to an underline. Which is not very good for anybody yet alone poor mouse users. The other problem is with the popup window that is opened if you click on one of the links to articles from the page above. There neither of the menu links work at all, no mouseover and click does nothing. IE and Opera are OK. Any ideas? Regards Nic __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox problem: Forces 100% width on a floated element
I have a strange problem I have never seen before. I have two floated elements inside another floated element. The two in question are floated left and right with widths of 48% - effectively giving me two columns, one thing on the left, one thing on the right. The problem is in Firefox, the right floated element is being forced to a 100% width, even though the class specifies 48%. It works fine in IE strangely enough. The page in question can be seen at: http://www.pixelmech.com/rev/test.html The CSS is inline. The class/element in question is .float-left-half inside the #help-titlebar. Any help is appreciated. Currently I'm locally overriding the width inline to fix it, but that is highly undesireable... Thanks Tom __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem: Forces 100% width on a floated element
I have a strange problem I have never seen before. I have two floated elements inside another floated element. The two in question are floated left and right with widths of 48% - effectively giving me two columns, one thing on the left, one thing on the right. The problem is in Firefox, the right floated element is being forced to a 100% width, even though the class specifies 48%. It works fine in IE strangely enough. The page in question can be seen at: http://www.pixelmech.com/rev/test.html The CSS is inline. The class/element in question is .float-left-half inside the #help-titlebar. Any help is appreciated. Currently I'm locally overriding the width inline to fix it, but that is highly undesireable... Thanks Tom Tom, Add a width of 99% to #help-titlebar (since you have 4px padding). You'll need to adjust the way you handle padding if you want it to be 100%, but adding a width to the parent will get Firefox to toe the line for ya. Hope it helps. Bill || | Bill Brown | | Webmaster, MacNimble.com | | http://www.macnimble.com | | mailto:[EMAIL PROTECTED] | | Phone: 215-237-2037| || ___ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem: Forces 100% width on a floated element
On 5/13/06, Bill Brown [EMAIL PROTECTED] wrote: http://www.pixelmech.com/rev/test.html The CSS is inline. The class/element in question is .float-left-half inside the #help-titlebar. Add a width of 99% to #help-titlebar (since you have 4px padding). You'll need to adjust the way you handle padding if you want it to be 100%, but adding a width to the parent will get Firefox to toe the line for ya. Thanks Bill, it does fix the width issue on that float, but causes two other issues. 1. A 1% space between the header and the outside border in Firefox 2. On resize smaller, pushing content down in IE This is why I had avoided a width on that container :(. Does anyone know what the cause of FF pushing that to 100%? Is there another solution perhaps? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem: Forces 100% width on a floated element
On 5/13/06, Bill Brown [EMAIL PROTECTED] wrote:
http://www.pixelmech.com/rev/test.html
The CSS is inline. The class/element in question is
.float-left-half inside the #help-titlebar.
Add a width of 99% to #help-titlebar (since you have
4px padding). You'll
need to adjust the way you handle padding if you want
it to be 100%, but
adding a width to the parent will get Firefox to toe
the line for ya.
Thanks Bill, it does fix the width issue on that float, but
causes two other issues.
1. A 1% space between the header and the outside border in
Firefox 2. On resize smaller, pushing content down in IE
This is why I had avoided a width on that container :(. Does
anyone know what the cause of FF pushing that to 100%? Is
there another solution perhaps?
Tom, you can fix this by doing this:
1. In your css, change/add:
#help-titlebar {
background: #b3b3b3;
padding: 0;
height: 20px;
width: 100%;
float: left;
}
.float-left-half p {
margin: 0;
padding: 0 2px;
}
.float-right-half p {
margin: 0;
padding: 0 2px;
}
2. In your html, change/add:
div id=help-titlebar
div class=float-left-half
pstrongHelp: /strongstrong id=helptitleActivity
Overview/strong/p
/div
div class=float-right-half
pPage 1 of 2 | a href=//Next gt;/a/p
/div
br class=simpleclear /
/div
That should fix it in IE and FF.
Hope it helps.
--Bill
___
$0 Web Hosting with up to 200MB web space, 1000 MB Transfer
10 Personalized POP and Web E-mail Accounts, and much more.
Signup at www.doteasy.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox problem with footers at bottom of viewport
I've been managed to position my footers at the bottom of the
viewport, based on the article at
http://www.alistapart.com/articles/footers/, and with the help of this
list have ironed out some bugs, but I'm still having a recurring
problem on one page.
Basically, the footer bar of my clients' site is set to position at
the bottom of the viewport if not enough content is on a page, but at
the end of the content if not. On this page however -
http://www.orangetoo.co.uk/ts/membersOffers.htm - when viewing in
Firefox, the footer sits at the bottom of the viewport and not at the
bottom of the content.
I've ensured all images have a height (or width), and tried isolating
various bits of the code, and it seems that if I elimate a div called
#rightContent { display:block; float:left; margin:10px 16px;
width:510px; } then the footer displays correctly, which seems to
imply there is something wrong with this section of the css. I've
tried other ways of positioning this div, but it's presence always
seems to cause problems with the footer. But I feel I might be barking
up the wrong tree with this? Any ideas?
--
Peter Scott
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox problem with footers at bottom of viewport
Peter Scott wrote:
I've been managed to position my footers at the bottom of the
viewport, based on the article at
http://www.alistapart.com/articles/footers/, and with the help of this
list have ironed out some bugs, but I'm still having a recurring
problem on one page.
Basically, the footer bar of my clients' site is set to position at
the bottom of the viewport if not enough content is on a page, but at
the end of the content if not. On this page however -
http://www.orangetoo.co.uk/ts/membersOffers.htm - when viewing in
Firefox, the footer sits at the bottom of the viewport and not at the
bottom of the content.
I think you'll have to contain the float:
.solidclearer {clear: both;}
...
div class=solidclearernbsp;/div
/div !-- mainContent--
div id=footer
...
regards, Ingo
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
