[css-d] IE7 Problem – Float and Margin Issues
Hi, The top of my this page http://www.blakehaswell.com/others/redux/forum/thread.htm (language warning) has pretty much exploded in IE7. There are a number of issues with how big certain margins are, and it appears as if some floats aren't clearing. I'm pretty new to dealing with problems in IE7, because I'm not yet certain how much support it has for some techniques. So anyone have any ideas? Thanks, Blake -- Australian Web Designer - www.blakehaswell.com __ 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] FOUC problem
Michael Geary wrote: From: Zoe M. Gillenwater Exactly. FOUC is a very specific bug. It means that *none* of the styles are loaded initially. I'm guessing they are, and it's just the background image that isn't loaded instantaneously. Again, Riva, do the styles on the fonts show up right away? Try making your text an outlandish color like bright red. Does that show right away? If so, it's not FOUC. It's a totally different bug. Well, I wouldn't go quite that far. You're right, a total FOUC is typical, but you could also have a partial FOUC. No you can't. If parts of the styles aren't loading, then it's a bug, but a different bug. It's not FOUC. FOUC means all the styles don't load for a second, in IE6 and lower, and it's caused by an @import in the head, and fixed with the addition of a link or script in the head. That's it. There are many, many other bugs that show flashing styles or partially rendered styles, in different combinations of browsers, but these are all separate things that deserve their own names and have their own fixes. If we start calling them all FOUC, we're just confusing the matter, because the FOUC fixes won't work for them. Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Rollover Images with CSS Layers
Simon Rodriguez wrote: I used absolute positioning to place an image on a page. Now I want to make the image a rollover image, with a link to another page. But when I insert the rollover effect (using Dreamweaver 8), the second image (the highlighted one) appears in a different part of the page. Thanks for your help. Simon, We can't help you without a page to look at. Also, are you sure this isn't a JavaScript issue? If it is, you'll need to take your question to a list suited to that. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Sliding door tab navigation to 100% ?
Skip Evans wrote: I have implemented his Sliding Door tabbed style navigation, and it works fine, but I need it to fill 100% of a table's TD cell, so it goes all the way across on all browsers without going into a double layer type look. Skip, I can't be sure of what you're asking without seeing a page to look at. Do you mean you have each tab in a TD, and you want it to fill up that TD? This is the default behavior if you don't specify a width on the TD or parent table, so we'd have to see the page to know what else is getting in the way if that's not happening. If, on the other hand, you mean that you have a one column table and have your entire nav bar in one TD and want it to stretch to fill up that TD, that is trickier. My first piece of advice is to stop thinking in the table mindset and embrace the CSS one, where things take up the amounts of space they do based on their text and are allowed to grow and shrink based on the users' preferences. However, if you absolutely can't get away from this old table effect, it's quite easy to emulate in CSS: set each LI (I assume each of your tabs is in an LI?) to display: table-cell. Unfortunately, this won't work in IE, which is where the trickiness comes in. Here's a page that shows you your options to deal with IE (basically, JavaScript): http://mrclay.org/web_design/tabs/ Hopefully all of this was of some use to you. Next time post a URL so I can be sure I'm not blathering on about something you're not interested in, and you can be sure to get more helpful help. :-) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Sliding door tab navigation to 100% ?
Hey all, For not posting the URL, let me just say... homer simpsonDo'h!/homer simpson Here is the link, the tabs are on the bottom. http://shop.venomouspenguin.com/template/bedandbath.html I could replace the TD table cells with div tags, if you think this would help the situation, but first, if I understand Zoe, it would be better to put each tab in its own TD cell. Right now they are all in one, so I will try this first. Thanks! Any more advice, of course, would be greatly, greatly appreciated. Skip Zoe M. Gillenwater wrote: Skip Evans wrote: I have implemented his Sliding Door tabbed style navigation, and it works fine, but I need it to fill 100% of a table's TD cell, so it goes all the way across on all browsers without going into a double layer type look. Skip, I can't be sure of what you're asking without seeing a page to look at. Do you mean you have each tab in a TD, and you want it to fill up that TD? This is the default behavior if you don't specify a width on the TD or parent table, so we'd have to see the page to know what else is getting in the way if that's not happening. If, on the other hand, you mean that you have a one column table and have your entire nav bar in one TD and want it to stretch to fill up that TD, that is trickier. My first piece of advice is to stop thinking in the table mindset and embrace the CSS one, where things take up the amounts of space they do based on their text and are allowed to grow and shrink based on the users' preferences. However, if you absolutely can't get away from this old table effect, it's quite easy to emulate in CSS: set each LI (I assume each of your tabs is in an LI?) to display: table-cell. Unfortunately, this won't work in IE, which is where the trickiness comes in. Here's a page that shows you your options to deal with IE (basically, JavaScript): http://mrclay.org/web_design/tabs/ Hopefully all of this was of some use to you. Next time post a URL so I can be sure I'm not blathering on about something you're not interested in, and you can be sure to get more helpful help. :-) Zoe -- Skip Evans Big Sky Penguin, LLC 61 W Broadway Butte, Montana 59701 406-782-2240 =-=-=-=-=-=-=-=-=-=-= Check out PHPenguin, a lightweight and versatile PHP/MySQL development framework. http://phpenguin.bigskypenguin.com __ 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] no border on image
Generator Microsoft Word 11 (filtered medium) I' m struggling to get a border
to appear around an image in Firefox and IE6. A dashed border appears OK but
not a thin or thick one.
The CSS is: img.img1{float:right; border:thick; margin-right:0px;
margin-top:0px}
Any ideas gratefully received.
Regards
Gary
__
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] no border on image
On 11/01/2007 14:10, Gary Williamson wrote:
Any ideas gratefully received.
img.img1 {
...
border: 1px solid [colour];
...
}
It's slightly more straight forward to use pixel widths than keywords,
in my experience.
__
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] FOUC problem
Zoe, can you point me in the right direction to find out what the bug might be? Thanks, Riva Zoe M. Gillenwater wrote: No you can't. If parts of the styles aren't loading, then it's a bug, but a different bug. It's not FOUC. FOUC means all the styles don't load for a second, in IE6 and lower, and it's caused by an @import in the head, and fixed with the addition of a link or script in the head. That's it. There are many, many other bugs that show flashing styles or partially rendered styles, in different combinations of browsers, but these are all separate things that deserve their own names and have their own fixes. If we start calling them all FOUC, we're just confusing the matter, because the FOUC fixes won't work for them. Thanks, Zoe __ 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] Sliding door tab navigation to 100% ?
Skip Evans wrote: http://shop.venomouspenguin.com/template/bedandbath.html I could replace the TD table cells with div tags, if you think this would help the situation, but first, if I understand Zoe, it would be better to put each tab in its own TD cell. Right now they are all in one, so I will try this first. No, I didn't say this. I think the best thing is to never let tables be involved in layout in any way. To achieve the effect you want, see the link I sent earlier. It doesn't advocate using tables, but has to turn the markup into tables using JavaScript if you want to support IE. That's your only option -- or abandoning the sliding doors technique altogether and just going the full table route, with each tab made up of three table cells, but that method makes kittens cry, so I don't recommend it. :-) Keep in mind, however, that there's no way to keep the tabs from wrapping onto another line, unless you want to let their text overlap each other, which is far worse. Although you think wrapping tabs look bad, remember that this is far more accessible than any other option. If you can't handle it, I think you should just make the tabs images and be done with it (I've been known to do this myself; see www.hsrc.unc.edu). Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] FOUC problem
Portman wrote: Zoe, can you point me in the right direction to find out what the bug might be? Riva, I think everyone on this list has said several times that this is not a CSS bug, it is a slow loading page. At least, that's what my understanding of it is. All you can do is get a faster web host or reduce the size of your image. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Sliding door tab navigation to 100% ?
Hi Zoe all, I checked out that link, and now I see it is what I want and the best solution to what I'm trying to do. Thanks much! Skip Zoe M. Gillenwater wrote: Skip Evans wrote: http://shop.venomouspenguin.com/template/bedandbath.html I could replace the TD table cells with div tags, if you think this would help the situation, but first, if I understand Zoe, it would be better to put each tab in its own TD cell. Right now they are all in one, so I will try this first. No, I didn't say this. I think the best thing is to never let tables be involved in layout in any way. To achieve the effect you want, see the link I sent earlier. It doesn't advocate using tables, but has to turn the markup into tables using JavaScript if you want to support IE. That's your only option -- or abandoning the sliding doors technique altogether and just going the full table route, with each tab made up of three table cells, but that method makes kittens cry, so I don't recommend it. :-) Keep in mind, however, that there's no way to keep the tabs from wrapping onto another line, unless you want to let their text overlap each other, which is far worse. Although you think wrapping tabs look bad, remember that this is far more accessible than any other option. If you can't handle it, I think you should just make the tabs images and be done with it (I've been known to do this myself; see www.hsrc.unc.edu). Zoe -- Skip Evans Big Sky Penguin, LLC 61 W Broadway Butte, Montana 59701 406-782-2240 =-=-=-=-=-=-=-=-=-=-= Check out PHPenguin, a lightweight and versatile PHP/MySQL development framework. http://phpenguin.bigskypenguin.com __ 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] FOUC problem
Portman wrote: Zoe, I reduced the size of my image, Cool. Ditch all the background images. It will look more contemporary. It will load even faster. And you will kill two birds in one fell swoop. [trimmed] Thanks, Riva [trimmed] Best, ~dL PS One Fell Swoop is the second album from Sioux Falls, South Dakota emo/rock band The Spill Canvas. It was released on August 9, 2005 through 111 Records :-) . -- http://chelseacreekstudio.com/ __ 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] HTML email, R.I.P.
Last year, a client of mine decided that they needed a monthly newsletter. No problem, said i, we can handle that fine. Personally, i hate HTML email. I don't use it. I loathe having to create it. But it's what the client wanted, and it didn't seem like too big a deal. We'd do it, as long as we weren't doing anything Evil. So, the client said, it simply *must* have the same design as the website. That's a problem, we replied, but what we'll do is use the same design styles to create a simpler version. We don't need the entire web interface for an email, just some of the same look feel. Away we toiled, testing in all the major mail clients. We cried, a little, when things just refused to work in the various webmails. Gmail would barf on the fix we used to get Yahoo! to behave. And Hotmail, at first only a little bit messy, became an insufferable PITA over some ridiculously simple mark-up. And don't even think of relying on any of them to respect the UTF-8 encoding, since they're displaying inside of a third-party web interface. But, eventually, things came together. The glitches had been smothered under a wealth of hokey fixes and resigned compromises (nothing new there). But i just came across a little tidbit that i thought i'd share: Microsoft Breaks HTML Email Rendering in Outlook 2007 http://www.sitepoint.com/blogs/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/ -- snip -- If support for web standards in browsers is improving slowly, then support in email clients is moving at a glacial pace. Attempts to document things like CSS support in the major email clients have revealed a depressing state of affairs, but with recent desktop clients like Thunderbird now sitting on solid rendering engines, things have been looking up. All that changed when Microsoft dropped a lump of coal into every web developer’s stocking with the end-of-year release to business customers, and the upcoming consumer release, of Outlook 2007. At the risk of turning this newsletter into a biweekly Microsoft bash, Redmond has done it again. While the IE team was soothing the tortured souls of web developers everywhere with the new, more compliant Internet Explorer 7, the Office team pulled a fast one, ripping out the IE-based rendering engine that Outlook has always used for email, and replacing it with … drum roll please … *Microsoft Word*. -- snip -- I'm going to ignore the suggestion that IE7 has made me relaxed about MS's crap, because, frankly, this is the most disturbing news yet in the annals of their abysmal support for standards. They're using *Word??!* Obviously, in order to use IE7's sparkling New Technology to render HTML in their flagship email client, they would have had to, you know, put some resources into updating Outlook. My guess is that the Outlook internals are so badly messed up that they realised it would tax their tens-of-thousands-strong developers far too much to re-tool it to use the new IE rendering engine. R.I.P HTML email. We hardly knew ye. __ 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] [OFF-TOPIC] HTML email, R.I.P.
This is clearly off-topic to CSS discussion. I urge the thread to close. Regards, Barney P.S: One word: RSS __ 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] Sliding door tab navigation to 100% ?
At 8:43 AM -0500 1/11/07, Zoe M. Gillenwater wrote: Unfortunately, this won't work in IE, which is where the trickiness comes in. Here's a page that shows you your options to deal with IE (basically, JavaScript): http://mrclay.org/web_design/tabs/ Zoe: Try 4 breaks in Safari. Probably something minor -- left tab portion travels too high on roll-over. tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ 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] [ADMIN] Re: [OFF-TOPIC] HTML email, R.I.P.
At 17:20 + 11/1/07, Barney Carroll wrote: This is clearly off-topic to CSS discussion While I agree that the bulk of Brian's message was not really on topic, the news about IE7's baby brother's html rendering is definitely worth its place on the list. That link again in case anyone didn't make it that far: Microsoft Breaks HTML Email Rendering in Outlook 2007 http://www.sitepoint.com/blogs/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/ Here are the relevant CSS-related points of the article's payload: # no support for background images (HTML or CSS) # no support for CSS floats # no support for replacing bullets with images in unordered lists # no support for CSS positioning I urge the thread to close. Unless anyone has any practical information to add about actually creating designs that degrade in the new Outlook or further CSS gotchas, then yes, no more posts on this subject please. And certainly no Microsoft bashing or whining. However Barney, it is not your place to make such pronouncements - what if 20 or so like-minded members of the list also wrote similar messages every time they saw an off topic message? I note and appreciate your enthusiasm - but please leave the moderating to the moderators ;) And the same goes for everyone else... P.S: One word: RSS No, one word: CSS :) Alex css-d moderator __ 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] Handheld stylesheets and the motorola Q
Brian C. Hicks wrote:
I'm attempting to get my handheld stylesheet to apply on windows
mobile 5; specifically I'm using the Motorola Q for testing. The
problem is it applies both my regular stylesheet and mobile one.
No experience with that device or IE mobile, but...
...there are at least 4 ways mobile browser handles web pages.
1: If 'handheld' stylesheet exists; apply it and nothing else. If
'handheld' doesn't exist; apply browser-defaults and nothing else.
This is how it _should_ be handled according to spec:
Media types are mutually exclusive in the sense that a user agent can
only support one media type when rendering a document. However, user
agents may have different modes which support different media types.
2: If 'handheld' stylesheet exists; apply that in addition to any
'screen' or general ('all') stylesheets. The 'handheld' stylesheet can
(at least in part) be used to override the other stylesheets,
declaration by declaration. The browser will then adjust some of the
resulting styles in an attempt to make it fit its own mobile profile.
3: The existence of 'handheld' is ignored, and only 'screen' or general
('all') stylesheets are applied. The browser will then adjust some of
the styles in an attempt to make it fit its own mobile profile.
4: All stylesheets are ignored, and browser-defaults take over everything.
IE mobile browser follows '2:' AFAIK, so you will probably have to write
new declarations for 'handheld' to override all existing styles - all
that exists in 'screen' or general ('all') stylesheets anyway, with the
same or higher specificity.
Such an override can be put in an '@media handheld' rule in the
'screen/all' stylesheet, so as not to overload the 'handheld' stylesheet
with corrections.
I know the full versions of Opera for mobiles follows '1:', so there
aren't any conflicts in that one. Opera won't be disturbed by the
tactics necessary for IE mobile either, but added file-size may slow it
down a bit.
All mobile version browsers do limit some style-options, and - apart
from all those that do not support CSS at all - many have pretty limited
support for standardized CSS. It's pretty much a mess on the mobile
browser front.
More info...
http://www.howtocreate.co.uk/operaStuff/testMedia.html
http://www.howtocreate.co.uk/tutorials/css/mediatypes
Something extra...
http://annevankesteren.nl/2006/11/dot-mobi
regards
Georg
--
http://www.gunlaug.no
__
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] irregular float drop in IE7
I'm very familiar with float drops, but this one has me puzzled. It happens only periodically, but not dependent on changing the text size or narrowing the browser window, but rather just when refreshing the page. If you refresh the page over and over, it will be fine about 4 times out of 5, but that other one time there will be a drop. It happens to the white box labeled HSRC Project Areas here: http://www.hsrc.unc.edu/index.cfm It occurs in both IE6 and IE7, but in IE6 when it drops it immediately jumps back up, but in IE7 it stays dropped until you refresh again. It acts as though the paragraph, which is floated, is too wide, but it never gets any wider from one refresh to the next. If I float the ul (which makes up the white box that drops), it doesn't cure the drop, which helps confirm my suspicion that it has something to do with the floated paragraph. If I make the paragraph absolutely positioned [2], the drop never occurs: another confirmation that the drop happens because of the paragraph, because when its removed from the flow and the ul doesn't know about it, the ul doesn't drop. The typical fixes haven't worked so far. The paragraph already has layout, because it has a width set. The other magic fix of position: relative didn't help. The relevant styles for this area of the page are in this style sheet, starting at line 631 (yes, I prefer to keep things in one big sheet): http://www.hsrc.unc.edu/css/hsrc-global.css Does anyone have any ideas? Zoe [1] Float drops are when content adjacent to a float drops down below the float, not when the float itself drops. Something of a misnomer, I know. [2] I used to have the paragraph absolutely positioned, but this wouldn't allow the brown box to grow with the text as it increased in size. I think I'm more willing to have a periodic float drop than a periodic text overflow, so I don't want to go back to the absolute positioning. -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] collapsing div and margin problems in safari +ie 6-
Hi, The following page: http://www.learnerdesign.com/acufamily/test5.html appears fine in firefox and ie7, but has multiple display issues in safari and ie 6, 5.5, 5.0 etc. the css is at http://www.learnerdesign.com/acufamily/css/test5.css #container collapses vertically in safari #container spreads off the page in ie 6.0, 5.5, 5.0 #main_body collapses in ie5.5 Any help would be greatly appreciated. I am learning css and if there are any glaring errors with position, padding etc, margins etc please let me know. Many Thanks, Noah__ 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] Problem with Firefox floating
Hey there all. My first post, so bear with me, please. I'm changing the look of my fathers website as it was created totally in a WYSYWIG. I have been coding in html, using tables and the like for a year, using css only to enhance the look. Then I find out that css is the way to go for setout and styling, so I know a bit but am totally green as to setting out. Any way, on to the problem. I've been using the book 'css mastery' to learn the floating method for fluid 3 column sites but cannot workout why this site works well in ie7 but not in firefox. Not sure whether it's in my styles or otherwise. I just want a nice 3 column layout that works well in both browsers and is fluid. Thanks. 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] IE 6 and em tags
Everytime we add the em tag to more than one line it appears that the width of my text area is influenced. What happens is my nav-bar located at the left of the text area drops a line. Does anyone know why?? Is there, yet, another hack we could use? FYI - This site is updated using contribute and the area is editable. Any insight would be helpful! Mike __ 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] IE 6 and em tags
MRegennitter wrote: The link to the site is 69.63.142.146/nm/Artestimonials.htm From: MRegennitter [EMAIL PROTECTED] Date: Thu, 11 Jan 2007 16:55:53 -0700 To: css-d@lists.css-discuss.org Subject: IE 6 and em tags Everytime we add the em tag to more than one line it appears that the width of my text area is influenced. What happens is my nav-bar located at the left of the text area drops a line. Does anyone know why?? Is there, yet, another hack we could use? FYI - This site is updated using contribute and the area is editable. Any insight would be helpful! Mike Hmm, site doesn't validate at W3C: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2F69.63.142.146%2Fnm%2FArtestimonials.htm Sorry, WAY too much CSS for me to try to figure out. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Problem with Firefox floating
David Van O wrote: My first post, so bear with me, please. Welcome, David. I've been using the book 'css mastery' to learn the floating method for fluid 3 column sites but cannot workout why this site works well in ie7 but not in firefox. Not sure whether it's in my styles or otherwise. David, if you have the page on a public server and provide a clickable link to it in your post, someone on the list will be able to give you specific suggestions to resolve the problem. Almost all the time, the compliant browsers (ff, opera, safari, and others) get it right-- while ie gets it wrong. I just want a nice 3 column layout that works well in both browsers and is fluid. If your goal is to /find a layout/ that is robust, stable, and known to work cross-browser, then the 3 column layout on these pages may meet your need: http://alistapart.com/articles/negativemargins/ http://blog.html.it/layoutgala/ And there are many more on the CSS-D wiki (see address below). David Regards, ~dL -- http://chelseacreekstudio.com/ __ 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] IE 6 and em tags
MRegennitter wrote:
Everytime we add the em tag to more than one line it appears that
the width of my text area is influenced. What happens is my nav-bar
located at the left of the text area drops a line. Does anyone know
why?? Is there, yet, another hack we could use?
Bug: the italic bug...
http://www.positioniseverything.net/explorer/italicbug-ie.html
Curing IE6 - add...
* html #right_column_st2c {overflow-x: hidden;}
regards
Georg
--
http://www.gunlaug.no
__
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] css popups
I'm trying to use some simple CSS-based popups. Of the browsers I've tested it in, Firefox 1.5 works great, Opera 9 has trouble if I use a relative div with display:inline, and IE 6 doesn't work at all. My test page is at test.dragonzreef.com/csspopuptest.asp. Thanks for your help, Andy __ 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] collapsing div and margin problems in safari +ie 6-
Noah Learner wrote:
The following page: http://www.learnerdesign.com/acufamily/test5.html
appears fine in firefox and ie7, but has multiple display issues in
safari and ie 6, 5.5, 5.0 etc.
the css is at http://www.learnerdesign.com/acufamily/css/test5.css
For IE6 and IE5.x/win, try adding the following to the bottom of your
stylesheet...
@media screen {
* html #main_body {overflow: visible;}
* html #main_content {overflow-x: hidden;}
* html #shell {overflow-x: hidden;}
* html #container {height: auto; overflow-x: hidden;}
}
Also, the IE hack you have in your stylesheet is wrong...
*html #container #main_body {height: 1%}
...there shall be a space between '*' and 'html' for it to be a proper
IE-hack. Actually, it doesn't do any good even when written correctly
since there's already a width on #main_body that acts as a
'hasLayout'[1] hack. Subsequently, you can delete that attempted IE hack
altogether.
Safari's collapsing seems to be a tougher nut to crack. My version
(2.0.4) doesn't like the 'overflow: hidden' on #main_body, but it
doesn't do well without it either. Potential fixes seems to disturb
various other browser. Someone else may figure out the exact cause and
fix for Safari's erroneous behavior.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
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] Problem with Firefox floating
Thanks. Not sure why I forgot the link, but will look at these resources. The page in question is www.aiddogs.com.au/shadowsite David - Original Message - From: ~davidLaakso [EMAIL PROTECTED] To: David Van O [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Friday, January 12, 2007 11:34 AM Subject: Re: [css-d] Problem with Firefox floating David Van O wrote: My first post, so bear with me, please. Welcome, David. I've been using the book 'css mastery' to learn the floating method for fluid 3 column sites but cannot workout why this site works well in ie7 but not in firefox. Not sure whether it's in my styles or otherwise. David, if you have the page on a public server and provide a clickable link to it in your post, someone on the list will be able to give you specific suggestions to resolve the problem. Almost all the time, the compliant browsers (ff, opera, safari, and others) get it right-- while ie gets it wrong. I just want a nice 3 column layout that works well in both browsers and is fluid. If your goal is to /find a layout/ that is robust, stable, and known to work cross-browser, then the 3 column layout on these pages may meet your need: http://alistapart.com/articles/negativemargins/ http://blog.html.it/layoutgala/ And there are many more on the CSS-D wiki (see address below). David Regards, ~dL -- http://chelseacreekstudio.com/ __ 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] Problem with Firefox floating
David Van O wrote: Thanks. Not sure why I forgot the link, but will look at these resources. The page in question is www.aiddogs.com.au/shadowsite HTML isn't valid - got lots of old style proprietary HTML attributes set in your code: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.aiddogs.com.au%2Fshadowsite%2F CSS validator reports your CSS is fine. You might offer browsers clean HTML and move your formatting settings from HTML attributes to CSS. David - Original Message - From: ~davidLaakso [EMAIL PROTECTED] To: David Van O [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Friday, January 12, 2007 11:34 AM Subject: Re: [css-d] Problem with Firefox floating David Van O wrote: My first post, so bear with me, please. Welcome, David. I've been using the book 'css mastery' to learn the floating method for fluid 3 column sites but cannot workout why this site works well in ie7 but not in firefox. Not sure whether it's in my styles or otherwise. David, if you have the page on a public server and provide a clickable link to it in your post, someone on the list will be able to give you specific suggestions to resolve the problem. Almost all the time, the compliant browsers (ff, opera, safari, and others) get it right-- while ie gets it wrong. I just want a nice 3 column layout that works well in both browsers and is fluid. If your goal is to /find a layout/ that is robust, stable, and known to work cross-browser, then the 3 column layout on these pages may meet your need: http://alistapart.com/articles/negativemargins/ http://blog.html.it/layoutgala/ And there are many more on the CSS-D wiki (see address below). David -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] collapsing div and margin problems in safari +ie 6-
Gunlaug Sørtun wrote:
Noah Learner wrote:
http://www.learnerdesign.com/acufamily/test5.html
Safari's collapsing seems to be a tougher nut to crack. My version
(2.0.4) doesn't like the 'overflow: hidden' on #main_body, but it
doesn't do well without it either. Potential fixes seems to disturb
various other browser. Someone else may figure out the exact cause and
fix for Safari's erroneous behavior.
Didn't see the exact cause. It is fixed in Webkit nightly build. Didn't
search in bugzilla.
your code:
#main_body
__#main_content
#shell
#container #main_body {
overflow: hidden;
...
}
#main_content{
float: right;
padding-bottom: 1000px;
margin-bottom: -990px;
...
}
#shell {
/* float: left;
display: inline; */
...
}
When I remove the float from shell, it looks ok for the moment in
Safari. Maybe there are not enough heights specified to work on. Not
good, as float is probably needed to contain various things in #shell on
other pages.
Ingo
--
http://www.satzansatz.de/css.html
__
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] irregular float drop in IE7
Zoe M. Gillenwater wrote:
It happens to the white box labeled HSRC Project Areas here:
http://www.hsrc.unc.edu/index.cfm
It occurs in both IE6 and IE7, but in IE6 when it drops it
immediately jumps back up, but in IE7 it stays dropped until you
refresh again.
Just a suggestion, as I can't be sure since it's too inconsistent in my
IE6 on line - and doesn't happen at all for a local copy.
I would add...
#project-areas-inner {width: 100%;}
...or...
#project-areas-inner {width: 470px;}
...so the float-width isn't depending entirely on the width of the
image. Without the image the #project-areas-inner float bocomes narrower
in all browsers - as it should, and knowing how erratic IE/win is with
calculations and timing, a declared width may help stiffen it up a bit.
regards
Georg
--
http://www.gunlaug.no
__
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] Browser Check - Problems with I.E. 6.0 and below ?? help!
Thanks for the advice and help so far, that seems to have sorted out the
problem with the middle part of the site.
However what I am still getting is in IE 7.0 under the user log in box on the
left hand side, there is a picture and sign up text, however this does not show
up in IE 6.0 ??
Finally when I tested the page with browsershots.org on safari 2.0 on mac,
there are problems with the main navigation and header .
Any ideas on what is causing this ?
http://www.food.thfctalk.com/test.html
http://www.food.thfctalk.com/test.html
-Original Message-
From: [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
CC: css-d@lists.css-discuss.org
Sent: Thu, 11 Jan 2007 4.13AM
Subject: Re: [css-d] Browser Check - Problems with I.E. 6.0 and below ?? help!
[EMAIL PROTECTED] wrote:
http://www.food.thfctalk.com/test.html
works fine in IE 7.0 , it looks as it should, but if you look at it in IE
6 or below there are problems with it such as the middle section of the
page is pushed down to the bottom of the page, the main navigation is not
inline etc.
Adding...
* html #details {overflow-x: hidden;}
...will prevent the section-drop in IE6.
Something in that column is too wide - as least as IE6 sees it, and IE6
doesn't respect declared dimensions and will auto-expand the container
under such conditions.
The addition of...
#subnav {clear: both;}
...should help keeping the columns in their right places in older
IE/win, and will also reduce the chance for complete column-reshuffle
if/when font-size is applied - in any browser.
The header-arrangement is fragile in all browsers. There's no
centering-effect in Firefox and Opera, just an adjustment for the h1.
The main problem in IE6 is that a 100% wide #nav won't allow the main
navigation to move up alongside the floating h1 and appear to be
centered - if that is your intention.
regards
Georg
-- http://www.gunlaug.no
__
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/
