[css-d] IE 7/8 issues
Hi all, In Firefox, this looks exactly as it should. Same goes for Chrome. http://charlestonhealinghands.com/1/template.html In IE8, it's almost correct except that the navigation has a white background which covers up some of the background image that should show (should have no background color on the main nav). When you mouse over services, the sub-nav also comes up w/a white background instead of yellow as it should. In IE7, the same issues exist as in 8, but also the clear left is not working so it's pushing the content down with a huge gap left. It's a mess. Any thoughts? I am at my wits' end with this! Thanks! Jenni __ 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] IE 7/8 issues
Thank you so much, I did not realize that was there. I never really understood what that bottom section was there for--I am really trying to learn proper CSS but struggling at times. I am still not clear as to why in IE7 the clear left is not working. Any thoughts on that part?? http://charlestonhealinghands.com/1/template.html Thank you again!! Jenni __ 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] expandable content box spilling into footer area?
Thank you both for your input. I've tried both of those option, though,
with no success.
Making the content-bottom div an inner div prevents the main content area
from expanding.
The negative top margin for the content-bottom seemed like the best solution
when I began working on this, but in IE (testing in 7, have not tested 8
yet) the background image for the content-bottom overlaps the text and
covers it up completely. It looks fine that way in FF, Opera, and Chrome.
Any idea how I could do this so it works in IE as well?
Oh, and I also tried using Philippe's suggestion to someone else for the
multiple images for a single div, still could not get the main content image
to repeat using that however.
As usual, IE makes CSS much more of a hassle than it should be!
Thank you for all of your help!
Jenni
You need #content-bottom as a container for the bottom image
so make #content-bottom a inner DIV for #content since #content has
the top image.
HTML:
div id=content
div id=content-bottom
...
/div
/div
CSS:
#content-bottom {
background:url(images/content-bottom.jpg) bottom no-repeat;
padding-bottom: 180px;
}
Regards
Maur?cio
One possible way might be:
#content-bottom {
margin-top: -200px; /* or something more appropriate */
}
Joergen
Hi all,
I am racking my brains to see if there's a way to do this, and not getting
anywhere.
I have a header, a content area, and a lower design area specified as
content bottom that the content needs to flow down into. The trouble is
that the site is designed so that the main content area will expand as
needed for longer text. I can't figure out if there is any way to still
have the last section of text overflow into the content-bottom area such
as shown in this image:
http://charlestonhealinghands.com/graphics/draft2.png
Here is the site template as I've done thus far:
http://charlestonhealinghands.com/1/template.html
Thanks for any thoughts!
Jenni
__
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] expandable content box spilling into footer area?
Hi all, I am racking my brains to see if there's a way to do this, and not getting anywhere. I have a header, a content area, and a lower design area specified as content bottom that the content needs to flow down into. The trouble is that the site is designed so that the main content area will expand as needed for longer text. I can't figure out if there is any way to still have the last section of text overflow into the content-bottom area such as shown in this image: http://charlestonhealinghands.com/graphics/draft2.png Here is the site template as I've done thus far: http://charlestonhealinghands.com/1/template.html Thanks for any thoughts! Jenni __ 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] There has got to be a better way
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Gillespie, Michael A (Mike) Sent: Friday, August 07, 2009 10:54 AM To: css-d@lists.css-discuss.org Subject: [css-d] There has got to be a better way I am laying out text on an angle to follow a background graphic. There has got to be a better way that stacking floated divs and adjusting the width of each one. See http://www.striking.com. Is there a better way to do this? Hey, if there is a better way, I'd love to see it... the way you've approached it is a pretty creative solution IMO! Jenni __ 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] Growing a section vertically...
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Michael Beaudoin Sent: Friday, August 07, 2009 12:42 PM To: css-d@lists.css-discuss.org Subject: [css-d] Growing a section vertically... I have a test where I would like to get the colored section this page to grow as the copy gets larger. Right now I have a set height, and I know that's not the way to do it, but I can't seem to get it to get larger vertically. You can see the page at http://www.ba-doyn.com/junk/saw/adults.htm. Be kind. :-) Thanks, Michael If you want the content to expand the section, then why do you have a specified height? Just remove that... Jenni __ 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] integrating CSS with ASP randomizer
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Snadden
Sent: Saturday, August 01, 2009 4:55 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] integrating CSS with ASP randomizer
On 2/08/2009, at 6:54 AM, Jenni Beard wrote:
My question is, I am planning to use a CSS layout. But, I will also
be
using ASP code so that the image of the dancer will randomize
about 4-6
similar images when a new page is loaded. I know that ASP is OT for
this
list, but I'm really not sure how to integrate the two together so
that the
dancer images can be a background image for every page. If I were
wanting
to just randomize a content image (such as the sample image of the
studio
shown in the draft), I know how to do that in ASP within the html
file, but
I'm at a loss as to how to incorporate it into a background with
CSS. Or,
is this something that can be done strictly in CSS without having to
use the
ASP randomizer code??
Use asp to output a randomised id and then set the background image
for the different ids in your css.
If you have 6 images, create 6 ids and one class. The class can be
used for setting the styles that apply to all of the images.
Your html might look like this...
div class=dancer id=dancer1!-- the id is randomised, sometimes
it will be dancer2, dancer3 etc. --./div
Your css might look like this...
.dancer {
/* all of the styles for the element apart from bg-image */
}
#dancer1 { background-image: url(/path/to/image/dancer1.jpg); }
#dancer2 { background-image: url(/path/to/image/dancer2.jpg); }
etc.
__
Thank you Tim. I am working on implementing this and have a question about
your answer. I've tried to figure out how to create a randomizer for the div
id itself and haven't figured that out yet, nor have I figured out how to
incorporate that code once I have it.
I tried another approach; I have created a randomizer for pulling photos out
of a folder--this is something I've done before. I've got a basic page
created that is doing this with little else on the page, and it works just
fine (I'm just using sample images at this point, and not adding any other
attributes to the asp code). The problem arises when I start to mix the asp
and css codes; I receive a 500 error for some attempts and other attempts
there is just nothing there where the random images should show up, and I
cannot figure out how to mix them and have it work.
On this page, I have the randomizer code set to two places. One works fine
(you can see the images come up), and the other has nothing showing up at
all (this is supposed to be at the top of the page; you can see the div set
up in firebug).
I've placed the css on the same page just to simplify things as much as
possible until I can figure this out; here is my entire page code; thanks
for any suggestions you can offer!:
--
%...@language=VBSCRIPT CODEPAGE=65001%
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titlethis is a test./title
style type=text/css
!--
.style1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
}
.dancer {
font-family: Geneva, Arial, Helvetica, sans-serif;
background-image: url(%Response.Write RandomImage(dancers/, gif
jpeg png, My Image)%);
background-repeat: no-repeat;
}
--
/style
/head
body
%
Function RandomImage(ImagesFolderPath, ImageFileTypes, ImageDescription)
'Declare variables
Dim CompleteImagesFolderPath
Dim FileSystemObject
Dim ImageFolder
Dim Files
Dim i
Dim ImageFiles
Dim File
Dim FileName
Dim FileExtension
Dim RandomNumber
'Find the complete path to image folder by using Server.MapPath
CompleteImagesFolderPath = Server.MapPath(ImagesFolderPath)
'Create an instance of the FileSystemObject which allows ASP to
'access the file system
Set FileSystemObject = Server.CreateObject(Scripting.FileSystemObject)
'Check that the folder containing the images exists
If Not FileSystemObject.FolderExists(CompleteImagesFolderPath) Then
RandomImage = Error 0: Cannot find requested folder
Set FileSystemObject = nothing
Exit Function
End If
'Get the folder containing the images
Set ImageFolder = FileSystemObject.GetFolder(CompleteImagesFolderPath)
'Get a list of all the files within the images folder
Set Files = ImageFolder.Files
'Use a dictionary object to temporarily store the image file names
i = 1
Set ImageFiles = Server.CreateObject(Scripting.Dictionary)
'Loop through the list of files within the images folder.
'If the file has a file extension that is in the list of
'file types specified in the ImageFileTypes function parameter
Re: [css-d] integrating CSS with ASP randomizer
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Snadden
Sent: Saturday, August 01, 2009 4:55 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] integrating CSS with ASP randomizer
On 2/08/2009, at 6:54 AM, Jenni Beard wrote:
My question is, I am planning to use a CSS layout. But, I will also
be
using ASP code so that the image of the dancer will randomize
about 4-6
similar images when a new page is loaded. I know that ASP is OT for
this
list, but I'm really not sure how to integrate the two together so
that the
dancer images can be a background image for every page. If I were
wanting
to just randomize a content image (such as the sample image of the
studio
shown in the draft), I know how to do that in ASP within the html
file, but
I'm at a loss as to how to incorporate it into a background with
CSS. Or,
is this something that can be done strictly in CSS without having to
use the
ASP randomizer code??
Use asp to output a randomised id and then set the background image
for the different ids in your css.
If you have 6 images, create 6 ids and one class. The class can be
used for setting the styles that apply to all of the images.
Your html might look like this...
div class=dancer id=dancer1!-- the id is randomised, sometimes
it will be dancer2, dancer3 etc. --./div
Your css might look like this...
.dancer {
/* all of the styles for the element apart from bg-image */
}
#dancer1 { background-image: url(/path/to/image/dancer1.jpg); }
#dancer2 { background-image: url(/path/to/image/dancer2.jpg); }
etc.
__
Thank you Tim. I am working on implementing this and have a question about
your answer. I've tried to figure out how to create a randomizer for the div
id itself and haven't figured that out yet, nor have I figured out how to
incorporate that code once I have it.
I tried another approach; I have created a randomizer for pulling photos out
of a folder--this is something I've done before. I've got a basic page
created that is doing this with little else on the page, and it works just
fine (I'm just using sample images at this point, and not adding any other
attributes to the asp code). The problem arises when I start to mix the asp
and css codes; I receive a 500 error for some attempts and other attempts
there is just nothing there where the random images should show up, and I
cannot figure out how to mix them and have it work.
On this page, I have the randomizer code set to two places. One works fine
(you can see the images come up), and the other has nothing showing up at
all (this is supposed to be at the top of the page; you can see the div set
up in firebug).
I've placed the css on the same page just to simplify things as much as
possible until I can figure this out; here is my entire page code; thanks
for any suggestions you can offer!:
--
%...@language=VBSCRIPT CODEPAGE=65001%
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titlethis is a test./title
style type=text/css
!--
.style1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
}
.dancer {
font-family: Geneva, Arial, Helvetica, sans-serif;
background-image: url(%Response.Write RandomImage(dancers/, gif
jpeg png, My Image)%);
background-repeat: no-repeat;
}
--
/style
/head
body
%
Function RandomImage(ImagesFolderPath, ImageFileTypes, ImageDescription)
'Declare variables
Dim CompleteImagesFolderPath
Dim FileSystemObject
Dim ImageFolder
Dim Files
Dim i
Dim ImageFiles
Dim File
Dim FileName
Dim FileExtension
Dim RandomNumber
'Find the complete path to image folder by using Server.MapPath
CompleteImagesFolderPath = Server.MapPath(ImagesFolderPath)
'Create an instance of the FileSystemObject which allows ASP to
'access the file system
Set FileSystemObject = Server.CreateObject(Scripting.FileSystemObject)
'Check that the folder containing the images exists
If Not FileSystemObject.FolderExists(CompleteImagesFolderPath) Then
RandomImage = Error 0: Cannot find requested folder
Set FileSystemObject = nothing
Exit Function
End If
'Get the folder containing the images
Set ImageFolder = FileSystemObject.GetFolder(CompleteImagesFolderPath)
'Get a list of all the files within the images folder
Set Files = ImageFolder.Files
'Use a dictionary object to temporarily store the image file names
i = 1
Set ImageFiles = Server.CreateObject(Scripting.Dictionary)
'Loop through the list of files within the images folder.
'If the file has a file extension that is in the list of
'file types specified in the ImageFileTypes function parameter
Re: [css-d] variable spacing of nav bar...
-Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Michael Beaudoin Sent: Monday, August 03, 2009 3:08 PM To: css-d@lists.css-discuss.org Subject: [css-d] variable spacing of nav bar... I'm using a list to make a horizontal nav bar. Is it possible to make the spacing variable so that they are visually separated? Do I have to assign a class or id to each one to adjust the left margin/padding? You can see the screenshot of how it's supposed to look here: http://www.ba-doyn.com/junk/test.png You can see the test site here: http://www.ba-doyn.com/junk Thanks again for all your help. Michael Instead of specifying a width for each li, just assign padding. Best, Jenni __ 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] integrating CSS with ASP randomizer
Hi all, I have a sort of general question about an approach to CSS coding for a site I'm working on. Here is the visual draft just for reference: http://spiritmoves.com/new-site/graphics/draft4b.jpg The logo and the dancer image are placeholders while I await the real images. My question is, I am planning to use a CSS layout. But, I will also be using ASP code so that the image of the dancer will randomize about 4-6 similar images when a new page is loaded. I know that ASP is OT for this list, but I'm really not sure how to integrate the two together so that the dancer images can be a background image for every page. If I were wanting to just randomize a content image (such as the sample image of the studio shown in the draft), I know how to do that in ASP within the html file, but I'm at a loss as to how to incorporate it into a background with CSS. Or, is this something that can be done strictly in CSS without having to use the ASP randomizer code?? Thanks a bunch for any suggestions, Jenni __ 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] adjusting overall size in css?
Hi all, I'm having yet another problem with the site I'm working on. It seemed perfect, then I was told that the person viewing it could not see the entire site (width) on his computer monitor. I verified that this is not a very old monitor. I probably should try to make the overall wrapper width a bit narrower since it's set at a width of 1200px, but I was designing the site with the idea that the old 600x800 monitors are pretty much obsolete so it seems that it should work in anything else. I've viewed the site on 4 different machines-including a fairly small laptop screen, which shows it perfectly. But while viewing on a different, older laptop, one must scroll side to side to see much of the text while keeping the left navigation in view. I'm told by a few friends that I had check it that it views the same way on a couple other screens. So my question is, is there a way to make the site stay the same size on a larger monitor but automatically shrink down on a smaller one? Please keep in mind that the site must be easily viewable by an audience that is not terribly computer-savvy so expecting them to change monitor settings or browser settings is not the solution. http://fossilbyte.com/1/index.html Thank you! Jenni __ 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] hover nav bg?
-Original Message- From: Climis, Tim [mailto:tcli...@indiana.edu] Sent: Monday, June 01, 2009 12:48 PM To: 'Jenni Beard'; 'David Hucklesby' Cc: 'css-d@lists.css-discuss.org' Subject: RE: [css-d] hover nav bg? You're using this code for your hovers: background-position: -40px center; That means that the image is hanging 40px off the left of the link. Since it's not in the link box anymore, it's not visible. If you reset that -40px to 0 or left then the whole image will be in the link box, and show up. If you want the arrow to hang off the end of the parchment (which is the only reason I can think of for what you did) then give the a tags negative left margin, and then left padding to compensate. ---Tim Hi Tim, (and all who replied on this) Thanks again for all of your help with this. I still cannot get the rest of the arrowhead to show up in IE7 (or IE6), though it looks great in Opera, Chrome, and Firefox. I followed your advice exactly, which worked great in the modern browsers. Any suggestions on how to get this to work properly in IE7/6? http://fossilbyte.com/1/template.html Thanks again for your help, Jenni __ 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] hover nav bg?
-Original Message- From: Climis, Tim [mailto:tcli...@indiana.edu] Sent: Monday, June 01, 2009 12:48 PM To: 'Jenni Beard'; 'David Hucklesby' Cc: 'css-d@lists.css-discuss.org' Subject: RE: [css-d] hover nav bg? You're using this code for your hovers: background-position: -40px center; That means that the image is hanging 40px off the left of the link. Since it's not in the link box anymore, it's not visible. If you reset that -40px to 0 or left then the whole image will be in the link box, and show up. If you want the arrow to hang off the end of the parchment (which is the only reason I can think of for what you did) then give the a tags negative left margin, and then left padding to compensate. Also, the highlight color of the menu items is too close to the background color. When I checked it this morning at home, I mistakenly thought they were disappearing. At work, with a better monitor, I can see that they're still there, but pretty close to invisible nonetheless. ---Tim --- Thanks, Tim! I've got this working perfectly now. The only problem I'm still having is with IE7 (and I've yet to test IE6 since I need to fire up an ancient computer to do that)--the arrowhead still is cut off in IE7. Any thoughts on that?? Otherwise, all I need to do now is to get the arrowhead looking decent, and then build my content repeating bottom. Really appreciate the help from everyone who has replied! Thanks, Jenni __ 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] hover nav bg?
-Original Message- From: David Laakso [mailto:da...@chelseacreekstudio.com] Sent: Monday, June 01, 2009 7:53 PM To: Jenni Beard Cc: 'Climis, Tim'; css-d@lists.css-discuss.org Subject: Re: [css-d] hover nav bg? Jenni Beard wrote: I've got this working perfectly now. The only problem I'm still having is with IE7 (and I've yet to test IE6 since I need to fire up an ancient computer to do that)--the arrowhead still is cut off in IE7. Any thoughts on that?? Otherwise, all I need to do now is to get the arrowhead looking decent, and then build my content repeating bottom. Jenni Have you uploaded the changes to your host/server? What is the uri of this site in which this is working perfectly now: in which you still have a problem in IE/7; and, have not tested in IE/6.0? Yes--Same url as previously mentioned: http://fossilbyte.com/1/template.html the nav looks exactly as it should (except for the edges of the graphic) in all except for IE __ 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] hover nav bg?
Hi all, This is going to sound incredibly stupid. I just think my mind is giving up. I have a background image for my entire navigation bar (vertical). Then, I also have an image that is for each menu item hover: http://fossilbyte.com/1/images/arrowhead.gif (I know that it appears really rough around the edges, need to try and work that one out, too) Problem is that only a small section of the hover image appears: http://fossilbyte.com/1/template.html Right now it's only showing up for items 2 4. Trying to figure out why not on the other items, but will get to that problem once this one's solved! Thanks all. __ 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] google translator gadget affecting css
Hi, I am new to this group and hope someone has a suggestion for me. I have just added the Google Translation Gadget to a new site I'm building. Thus far, the CSS is coming along well (not quite done yet). But when you select a different language from the tool to translate the page, a white bar appears at the top of the page which forces some elements down and others remain constant. As a result, the text is not all sitting upon the background where it belongs. Here is my page: http://fossilbyte.com/1/template.html Any suggestions? Thanks, Jenni Beard The Web Lotus Web Design, Development, and Marketing www.TheWebLotus.com je...@theweblotus.com __ 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] css or javascript hacks for firefox
then it is also present in Safari (3.2.2). Hacking Firefox 3 is
dangerous since particular bugs have been fixed with this version but
the hacks are more specific (targeting or filtering) to Gecko engine
versions. There is many of them. Anyway how can you hack a fix for this
bug?
Im no expert, but have been working with CSS for awhile now. Ive found it
particularly difficult when trying to make a site layout work for all
browsers. Generally these days I code for IE7, then check out Mozilla and
Opera (and am getting ready to embark on Google Chrome, alas!), then add
hacks where needed since these all seem to render most CSS layouts a bit
differently.
Heres an example of the one I found and have been using for awhile for
Mozilla 3+:
---
#content {
background-image: url(../images/content.jpg);
background-repeat: no-repeat;
overflow: visible;
width: 824px;
float: right;
margin-top: 20px;
color: #40352F;
}
/* First hide an element in Firefox 2 and higher */
html[xmlns^=]:not([lang*=]) [id= #content]
{margin-top: 20px; }
/* Now reverse the above in Firefox 3 and higher */
html[xmlns^=]:not([lang*=]) #content:not([id=#content])
{margin-top: 0px; margin-left: -50px;}
Hope this helps!
Jenni Beard
The Web Lotus
Web Design, Development, and Marketing
www.TheWebLotus.com
je...@theweblotus.com
__
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] css or javascript hacks for firefox
I don't know any IE7 hacks, nor have I seen any. Now, IE6, THAT'S another story! That browser is/was SO annoying. Anyone know what % of people are still using IE6 anyway? Last stats I heard were from almost 2 yrs ago, that claimed almost 25% of internet users... Thanks! Jenni -Original Message- From: David Laakso [mailto:da...@chelseacreekstudio.com] Sent: Friday, May 29, 2009 8:47 PM To: Jenni Beard Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] css or javascript hacks for firefox Jenni Beard wrote: Generally these days I code for IE7, then check out Mozilla and Opera (and am getting ready to embark on Google Chrome, alas!), then add hacks where needed since these all seem to render most CSS layouts a bit differently. Code to IE/7??? I don't think so. Code to compliant browsers. Hack non-compliant browsers: IE/6 and IE/7. __ 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] css or javascript hacks for firefox
Hmm, I've found that often what works in Mozilla does not work in Opera or vice-versa, now I just finally broke down and downloaded Chrome, and all works great in IE7, Mozilla3, Opera9.64, but the navigation is skewed to the left by about 30 or 40 px in Chrome. So, now I feel like I have to add a hack for Chrome--anyone have one??? Why oh why won't the browsers all see it the same way?!?! http://fossilbyte.com/1/template.html Thanks!!! Jenni PS--I am using a PC, don't know if on Chrome that makes a difference... -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Snadden Sent: Friday, May 29, 2009 8:51 PM To: Css-Discussion Group Subject: Re: [css-d] css or javascript hacks for firefox On 30/05/2009, at 9:47 AM, Jenni Beard wrote: Generally these days I code for IE7, then check out Mozilla and Opera With respect I would suggest a different approach to the line above. If you write standards compliant markup and CSS you will rarely have to make significant changes to make things work in recent versions of Firefox, Safari, Opera and Chrome unless you are doing something particularly complicated. IE is the 'problem child' so I always check it *last* and ensure that none of the nonsense rules required to make IE work make it into the main stylesheet. That way I know I'm working on a solid foundation and my thinking hasn't been polluted by IE's incorrect rendering. As far as hacking for versions of firefox etc. goes... I generally resort to javascript at that point by adding a class to body (e.g. 'lessthanff3') and hanging CSS rules off that. YMMV, different strokes etc. Cheers, Tim __ 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-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/
