Re: [css-d] Almost there!! But my nav buttons in IE...
Yeah, I'll be doing that, because the a:visited and a:hover will be
swapping out the image with another. Perhaps that's what I need to do
before I worry any more about the spacing.
Who says you need JavaScript to swap images?? I used the CSS image
swapping with a website I did for a coffee shop, and as you hovered
over each of the nav buttons, the bullets - er, coffee beans - would
rotate, so it looks like they're jumping beans. :-) The power of CSS.
Thanks!
Theresa Mesa
Mesa Design House
http://mesadesignhouse.com
909-796-5739
909-796-5789 (Fax)
On Apr 4, 2008, at 9:43 PM, Alan K Baker wrote:
This works in IE6 and IE7:
!--[if IE]style#containerLeft img {margin: 0 0 -3px 0;padding:
0;}/style![endif]--
but it's a bit of a 'dirty' fix. :-)
Might give you something to work on.
I must say that I would prefer to see the link buttons generated in
a list. You can then alter the list element margins to suit, and
(for me) it works in all browsers. You could also change the shading
on each button to reflect the hover and active states, by image
displacement. See: www.michaelwooldridge.co.uk
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: tmesa.mesadesignhouse
To: CSS-D List
Sent: Saturday, April 05, 2008 4:00 AM
Subject: [css-d] Almost there!! But my nav buttons in IE...
In IE7 (I haven't checked IE6 yet), the button images are separating
from each other, but in FF/Safari, they're not. They're NOT supposed
to separate from each other, so they're supposed to look like they do
in FF.
Can anyone help me with this IE issue?
BTW, I validate - CSS and HTML.
I took Gunlaug's suggestion and put the background into one image.
However, now I'm going to need to slice it in two so it can expand
vertically with a tile image. I'll cross that bridge when I get to
it.
http://mdh-test.com/Quiel/index2.shtml
http://mdh-test.com/Quiel/quiel.css
Theresa Mesa
__
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/
[css-d] Almost there!! But my nav buttons in IE...
In IE7 (I haven't checked IE6 yet), the button images are separating from each other, but in FF/Safari, they're not. They're NOT supposed to separate from each other, so they're supposed to look like they do in FF. Can anyone help me with this IE issue? BTW, I validate - CSS and HTML. I took Gunlaug's suggestion and put the background into one image. However, now I'm going to need to slice it in two so it can expand vertically with a tile image. I'll cross that bridge when I get to it. http://mdh-test.com/Quiel/index2.shtml http://mdh-test.com/Quiel/quiel.css Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) __ 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] AAck! It's breaking in IE7 the same way it's breaking in DW
I have quintuple-checked the width of the replaced elements and background images. I've quintuple-checked my math. Margin: 0; Padding: 0; In FF/Safari this flows just fine. In IE7 (I haven't even checked IE6 yet), the div.pageheadEnd keeps flowing to below the pageheader. I am recoding this site and have to work with the images they've given me - sliced and diced Photoshop images. They all have to sit *right next* to each other. What am I doing wrong? Let's ignore the fact that it's not flowing right in DW. Let's just look at the fact that it's not flowing properly in IE 7. BTW, I am building this in CSS after all. Not a table to be found. Everything validates. http://mdh-test.com/Quiel/index2.shtml http://mdh-test.com/Quiel/quiel.css Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) __ 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] Works great in IE7, not so much in FF/Safari
I'll explore rounded corners later, when I don't have three sites to build, and a host of print jobs to build. It *IS* something I'd like to try. This is year 5 of building websites, year 37 of print design. I'd have to say building websites is the most annoying, because the tools for doing so are so inadequate, *compared to the tools I use for print work*. Everyone talks about the power of CSS, but it pales to transparency in comparison to the power of Photoshop, Illustrator, and InDesign. The flexibility of the web page is a blessing and a curse. I do enjoy some of the process, though, and am currently teaching myself PHP and MySQL. However, bringing this back to CSS, after fixing the syntax of one of the nested floats (in a div with a class) to float:inherit (it was in a div with an id, using float: left), DW's rendering worked just fine (rendering engine in DW much improved in CS2 and CS3), and the page displayed properly in IE6 7, and in FF Safari. My other issue was, duh (to myself), not using the correct rule name for the donate div. Since CS2, I really haven't had too many problems with the DW rendering engine. Sometimes the rendering engine gets a little funky, but not often. Now I'm off to another site giving me much grief, that involves recoding a site built using a sliced and diced Photoshop image. I've decided I'm not putting it in tables after all. This should be fun. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 29, 2008, at 12:56 AM, Gunlaug Sørtun wrote: tmesa.mesadesignhouse wrote: I'm going to get rid of the background box for the navigation and do it normally, rather than as a background image, although I'm researching rounded corners and CSS, since that's what the client likes. That way I don't have to have fixed font sizes. For a case like yours with a fixed width and (preferably) a fluid height, one of the most straightforward rounded corner methods is to use 2 background-images - one for the top and one for the rest. I actually included this method in my first response, but it didn't come through properly since I didn't prepare both images :-) Here's a slightly better prepared version... http://www.gunlaug.no/tos/alien/tm/test_08_0328.html CSS: http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/ierc.css Images: http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/nav_box0.gif http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/nav_box1.gif ...so you can see this simple method in action. Needless to say it can be done with only one, large, image. A google will let you find lots of variants that achieve the rounded corner effect with one, two or four images, and the fewer images the better - in most cases. I've been making things too difficult for myself. That sounds like an ordinary journey from print to web design. The paper is flexible on the web. 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] Testing browsers
And browsercam is the only way you're going to get IE5 for the Mac to work, since Microsoft stopped supporting it in December of 2005, removed IE Mac from their downloads section on January 31, 2006, and told Macintosh users in 2006 (2 years ago!) to *stop using Internet Explorer on their Macs.* IE5 can create real problems for the rest of the Mac OS, as in crashing and kernel panics, so I don't know why Mac users would still be clinging to it. According to your stats, what percentage of IE5 for Mac users are viewing your site? On my stats (I love AwStats), it's about 0% (5 hits). Even my sister, who was a die-hard OS9 user because of some of her chemistry software, finally left the dark side. Is your client going to pay for the the extra time futzing with the CSS to make it work in something that shouldn't be being used anyway? On my stats, Opera is about 1%. Konqueror is .1%. Camino is .3%. Safari is 16%. Firefox is 29.7%. YMMV. To answer your question for myself, I have Safari and FF running on my MacPro and MacBookPro (so I really only need to check it on one computer). On my MacPro I have Parallels/Windows XP running on that, with IE7 (29%). On my MacBook Pro, I have Parallels/ WinXP and IE6 (19.5%) (wherein I have to *constantly* ignore the Microsoft nags to PLEASE upgrade to IE7 because my IE6 is supposedly such a freakin' security risk). I suppose I should be checking in other browsers, but I'm not, although I do run a site through the Lynx checker. I think I'll also install Safari on my PC, too. Good idea! I suppose I should start checking my sites in Opera, too. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 8:49 AM, Cristian Palmas wrote: Hi Folks, I'd like to know how did you organize yuorselves for testing site in different browsers. I mean, I installed on XP Safari 3.1, FF2 and IE6 while on Kubuntu 7.10 linux I installed Opera 7, FF2, Lynx and Konqueror. Since it is not so practical to have a lot of browser installed I wish to know if there are platforms or frameworks which emulates different browsers. For instance, I'd like to have IE5.x both for Mac and Win on the same machine (Linux preferred). Is that possible? Or do I need to ask someone to test my design with the browsers that I don't have? Thanks -- ~ Cristian Palmas ~ __ 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] browser combatibility issues
Microsoft told Mac users in January 2006 to stop using IE for the Mac. You can't even download it from Microsoft anymore. Now it breaks sites. It crashes computers and causes kernel panics. No one is using (or should be using) IE for the Mac. What do your stats say about IE Mac users using that particular browser to view your sites? I'm betting it's about 0%. Will your client pay you to code for something that no one is using? Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 7:14 PM, Daniel Hammond wrote: | I don't have IE 5 on the Mac and there is no IE 6 or 7, so no | worries | there. | Good luck. | Zack Frazier Can someone please take a look at the site in IE on a mac and offer some guidance as to why it's messing up the site's layout so badly? Just a reminder, the url is http://www.objectivedesigns.com/rsdp/ nwc/, and the css is http://www.objectivedesigns.com/rsdp/nwc/index.css. That browser/platform is having some major page layout issues. If you click around to the different pages, you'll see what I'm talking about. Thanks, Daniel __ 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] Works great in IE7, not so much in FF/Safari
Very interesting. The first fix made the site work in all the
browsers, but boy, did it break the rendering in the DW! Now my main
content and the donate button are hanging off the right edge of my
content box and kind of off the edge of the DW window. Could the
float:left on the div#nav AND the float:left on div.list-menu be
causing that? The div#nav wraps the div.list-menu and div.donate.
On the donate button sitch. Sorry I wasn't clearer. I don't want the
donate button to be part of the navigation box. I want it to be below
it and centered underneath it. The version you gave me a link to was
totally broken, because the box for the navigation is a background
image that is only 230px high and should only have navigation in it.
Your fix caused the background box to start doing some sort of tiling.
Theresa Mesa
Mesa Design House
http://mesadesignhouse.com
909-796-5739
909-796-5789 (Fax)
On Mar 28, 2008, at 1:49 AM, Gunlaug Sørtun wrote:
tmesa.mesadesignhouse wrote:
In IE7 (I haven't checked IE6 yet), the navigation centers vertically
perfectly. In FF (on PC and Mac) and Safari, the navigation is going
to the top of the box that is a background image. I can't for the
life of me figure out why.
IE6 and IE7 are cheating - the effect of 'hasLayout'[1], which means
no
other browser - including IE8 - will follow their lead without some
proper styling.
To fix, add a new box formatting context[2] generating style,
like...
div.list-menu {
float: left;
width: 100%;
}
...to keep the margin-top on div.list-menu ul from escaping
div.list-menu and join - collapsing[3] into - its margin-top.
I used that particular styling with 'float', to avoid problems with
some
of the alternatives in even older IE/win versions.
Then I need to put the donation box (in its own div) in the
horizontal center of that 250px width of the nav box that wraps
both the list- menu div and the donation div, not flush left. Have
a feeling this may be a parent-child or ancestor thing that I can't
figure out. I can't get that to work on any of the browsers I've
checked today.
Not sure if I understand how you want that to appear visually, so
here's
a partial and pretty rough example on how I would do it...
http://www.gunlaug.no/tos/alien/tm/test_08_0328.html
CSS:
http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/ierc.css
Some cross-browser tuning still needed to make it appear the same
everywhere, I think, but the basic markup and CSS changes are there.
You need two - different - background-images for it to make it look
right. I just reused the single one you have in there, so the upper
corners show up for the lower one. You'll get the idea.
Note: make those background-images tall enough and allow the container
to stretch in height, to allow for some font-resizing. Fixed height
means it'll break under stress, so I've commented that height out
for now.
I was able to validate the CSS and HTML on this. :-) You guys have me
trained.
Good - it helps :-)
http://mdh-test.com/ieresidential/index.shtml
http://mdh-test.com/ieresidential/ierc.css
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[3]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
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] Works great in IE7, not so much in FF/Safari
Sorry!! I didn't mean to sound like I was criticizing you! And your fix for the donation box worked this time (because it's below the navigation), but I haven't checked it in all the browsers. I do sort of wish the fix for the navigation worked in DW too, since I'm using it to view my layout before I upload it to the server. Kind of makes it hard to lay things out when the divs are all akimbo. When it looks like that in DW, I kind of feel like I've taken the pieces, thrown them up in the air, uploaded them to the server, and hope they go where they're supposed to without a lot of extra work. Of course, I'm a print designer first, so I'm used to looking at things where they're supposed to be before they ever go to press (or in the case of websites, to the server). I'm going to set the navigation font size so it doesn't resize. The words are pretty big as it is. But thank you so much for your help! I'll dig into this some more. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 9:20 AM, Gunlaug Sørtun wrote: tmesa.mesadesignhouse wrote: Very interesting. The first fix made the site work in all the browsers, but boy, did it break the rendering in the DW! Now my main content and the donate button are hanging off the right edge of my content box and kind of off the edge of the DW window. Could the float:left on the div#nav AND the float:left on div.list-menu be causing that? The div#nav wraps the div.list-menu and div.donate. Forget DW's rendering. DW is not a browser. On the donate button sitch. Sorry I wasn't clearer. I don't want the donate button to be part of the navigation box. I want it to be below it and centered underneath it. The version you gave me a link to was totally broken, because the box for the navigation is a background image that is only 230px high and should only have navigation in it. Your fix caused the background box to start doing some sort of tiling. Not tiling, but demonstrating how such a background should be applied if you don't want the nav to look broken in every browser on earth when subjected to font-resizing. I didn't bother to create the two images necessary for the effect, since it was just a quickly made example. Of course, what your design can take, or not, is not my problem, and you didn't ask for a solution. Reload my example to see the easily broken version, with the centered button below the nav... http://www.gunlaug.no/tos/alien/tm/test_08_0328.html CSS: http://www.gunlaug.no/tos/alien/tm/test_08_0328_files/ierc.css 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] Works great in IE7, not so much in FF/Safari
Yeah, I know I can't trust anything in an editor, but if it comes close, I know I'm going in the right direction. I can do the same thing you suggested in DW, but I use server side includes, too, and that doesn't serve up the SSIs. The editor does display SSIs. I have to actually upload it to my test server to see, if the editor can't be used. Thanks!! Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 10:03 AM, David Laakso wrote: tmesa.mesadesignhouse wrote: I do sort of wish the fix for the navigation worked in DW too, since I'm using it to view my layout before I upload it to the server. You can't trust viewing anything in an editor. Maybe someone on the list can give you the settings necessary to view the local file from DW in your browser (s). In the meantime, open any browser, click file, and then click the file you want to view in the browser you've opened. __ 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] Works great in IE7, not so much in FF/Safari
I can view it in the real browsers on and offline, but if I try to view a file with SSIs in it, it doesn't serve up the content of the SSIs, too, if I'm offline, you know, them being *server* side includes. The editor lets me view it, but not the offline browser viewing. I'm going to pull everything out of the SSIs until I make sure my layout is working. I'm going to get rid of the background box for the navigation and do it normally, rather than as a background image, although I'm researching rounded corners and CSS, since that's what the client likes. That way I don't have to have fixed font sizes. I've been making things too difficult for myself. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) On Mar 28, 2008, at 10:26 AM, Gunlaug Sørtun wrote: tmesa.mesadesignhouse wrote: Sorry!! I didn't mean to sound like I was criticizing you! No problem - either way :-) I do sort of wish the fix for the navigation worked in DW too, since I'm using it to view my layout before I upload it to the server. Relying on WYSIWYG software's rendering for web design is a recipe for disaster, IMO. All my tools let me view my creations in a series of real browsers off/on-line, and I can't imagine what else I should view them in. I'm going to set the navigation font size so it doesn't resize. The words are pretty big as it is. There's no way to set fixed font-size in HTML/CSS based web design. Those who think they can do so are probably victims of an illusion created by IE/win's apparent fixed pixels, which are easily ignored in same browser - often with disastrous results. I advice you to not waste time trying to prevent font-resizing, and instead test what happens if/when resizing is applied and make your designs adjust to it. 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/
[css-d] *I FIXED IT!* WAS: Works great in IE7, not so much in FF/Safari
:-) Well, I know the web isn't print. I was talking about the tools to work with the file. I build a logo, it's in Illustrator. I build a business card, I use InDesign. I futz with an image or photo, I use Photoshop. Each allows me to see how it's going to look as I work. BTW, *I FIXED IT!!* I mean the way it was displaying in DW. I KNEW it was that second float that was mucking up the works! So for div#nav, I had float:left, and then for div.list-menu, which was inside div#nav, I did float:inherit, since it was a div class inside a div id. The layout in DW lines right up, now. OMG!! Works on FF, Safari, IE6 and IE7. It also would have helped, with the donation thing, if I was calling the class out by the correct name. Duh. I gave up on the rounded corners for right now and made the text resizable. The site needs to be accessible. Still, I couldn't have fixed this without your help, Gunlaug and David!!! And thank you, Jason, for the words of cheer. You all rock! MAJOR lessons learned today. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) The hardest part for me was realizing that the web is not print... Unfortunately we don't have full control over how it looks unless we make it a PDF to download, which isn't optimal. Once I was okay with it not being pixel perfect, my life got a lot less stressful! Just thought I would share my experience since we have somewhat close to the same perspective! :) But thank you so much for your help! I'll dig into this some more. Theresa Mesa Mesa Design House http://mesadesignhouse.com 909-796-5739 909-796-5789 (Fax) __ 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] Works great in IE7, not so much in FF/Safari
In IE7 (I haven't checked IE6 yet), the navigation centers vertically perfectly. In FF (on PC and Mac) and Safari, the navigation is going to the top of the box that is a background image. I can't for the life of me figure out why. Then I need to put the donation box (in its own div) in the horizontal center of that 250px width of the nav box that wraps both the list- menu div and the donation div, not flush left. Have a feeling this may be a parent-child or ancestor thing that I can't figure out. I can't get that to work on any of the browsers I've checked today. I was able to validate the CSS and HTML on this. :-) You guys have me trained. Here are the links: http://mdh-test.com/ieresidential/index.shtml http://mdh-test.com/ieresidential/ierc.css Can anyone PLEASE point me in the right direction? I've spent several days mucking through the floating and positioning section of Eric Meyers' Definitive Guide (albeit from 2004). My brain is full and I can't figure out what I'm doing wrong. Theresa Mesa __ 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/
