|
CSS - Hack To Fix Backgrounds On Non Body Elements Ie
Does such a thing exist...
what I mean is that div {background-imageimage.png);background-attachment:fixed;} would work in IE (like it does in mozz) Does anyone know of any hacks/workarounds/techniques to get this to work in the brilliant IE? Cheers Similar TutorialsAt the moment, my BODY tag contains the following CSS: Code:
BODY {
background: url(images/gradients/bg_top.jpg);
background-repeat: repeat-x;
}
The bg_top.jpg file is an image 200px high, and 3px wide. This displays nicely at the top of my page. It is a gradient from dark grey which fades out to a pattern of simple squares. I would then like these squares to be repeated across the whole of my background. What I wanted to do was to set a second background image that would display underneath the gradient, but this didn't appear to work. Looking around Google, it appears that you can only set the one background for the body tag. Is this the case? If so, is it possible to set it up so that the square pattern repeats itself across the whole page, but underneath the gradient at the top? Many thanks. I'm currently customizing a theme for a Drupal site and am having a bit of an issue with background images on some content. I have 1 class and an HTML element that I'm trying to apply the style to. I have a non-repeating background applied to the title class which is positioned to the left of the area. The second is a background I'm attempting to tile across the x-axis of the h2 element. This second background does not show while the first one is showing. Is there a way around this? I'm assuming that because it's the same element, I won't be able to get away with this and will have to find another solution. Here is my HTML Code: <h2 class="title"><a href="/drupal/node/1">Welcome to the Caustic Guild!</a></h2> CSS Code:
#mcol .title {
background: url(/drupal/themes/caustic/images/icon_post.gif) no-repeat 0px 2px;
}
#mcol h2{
background: url(/drupal/themes/caustic/images/mcol_head.jpg) repeat-x;
margin: 0px 0px 0px 0px;
padding: 2px 0px 6px 35px;
font-size: 180%;
letter-spacing: -1px;
text-align: left;
border: 3px solid #78788a;
}
Hi everyone, this is my first post and I hope it's easily resolved. I'm new to CSS and working through CSS - The Missing Manual while slowly overhauling an old table-based web journal on the side. I'm trying to do the following: Left - navbar (~200px) Center - journal postings (~600px) Right - fixed image (~200px) // I want this to always be in sight I've gotten the first two nailed down nicely, but I'm having a really hard time with getting the fixed image to work. In extreme shorthand, the code relationship looks like this: <body> <nav-journal-image-wrapper width=1000> <nav-journal-wrapper width=800> <nav width=200> <journal width=600> </njw> </njiw> With the extra 200px of width in the final wrapper, I've been able to get the background image to be fixed and show nicely to the right of my navbar and journal post by making it the same 1000px in width. If the window is stretched, everything stays where it belongs - you just see more body background color. The problem is, when the window is condensed the final wrapper - despite having a set width - also is squeezed and my background image recedes under the journals. What I don't understand is why my navbar and journals seem impervious to small windows, but the wrapper around them with the background image is not? My code validates, and the relevant parts of the CSS start now: Code: <style type="text/css">
body {
background-color:#333;
}
/* without this wrapper, the background in #nav-post-portrait-wrapper aligns
with the screen right, not the wrapper's right */
#final-wrapper {
background-color:red;
width: 1034px;
margin: 0 auto 0 auto; padding: 0;
}
/* this gives me an extra 200px on the right to show the fixed background image */
#nav-post-portrait-wrapper {
margin: 0;
padding: 0;
width: 1034px; /* sets the max but doesn't seem to be preventing collapse */
background-color: white;
background-image: url(CSS-TESTING/background-portrait-2.png);
/* the image is also 1034px wide - I want this wrapper's width to be frozen! */
background-repeat: no-repeat;
background-position: top;
background-attachment:fixed;
}
/* this groups the navbar and postings together */
#nav-and-post-wrapper {
background-color:#0F0;
margin: 0;
padding: 0;
width: 828px; /* prevents collapse */
}
/* begin nav sidebar CSS code */
#mainNav-wrapper {
float: left;
top: 0;
margin: 0; padding: 0;
height: 312px;
width: 210px;
}
ul#mainNav {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
width: 200px;
border-left: 2px solid #930;
border-top: 2px solid #930;
border-right: 2px solid #930;
}
ul li {
width: 200px;
margin: 0; padding: 0;
height: 60px;
border-bottom: 2px solid;
border-bottom-color:#930;
}
/* end nav sidebar CSS code */
/* begin journal post CSS code */
#post-wrapper {
margin-left: 214px;
}
.post {
background-color:#6F9;
border: 2px solid #930;
width: 600px;
height: auto;
margin: 20px 0 0 0;
padding: 0;
}
/* end journal post CSS code */
</style>
<body bgcolor="#FFFFFF">
<div id="final-wrapper">
<div id="nav-post-portrait-wrapper">
<div id="nav-and-post-wrapper">
<div id="mainNav-wrapper">
<ul id="mainNav">
<li><a href="aboutme.htm" id="nav-about-me"></a></li>
<li><a href="journalmain.htm" id="nav-journal-main"></a></li>
<li><a href="beverageguide.htm" id="nav-beverage-guide"></a></li>
<li><a href="guestbook/index.php" id="nav-graffiti"></a></li>
<li><a href="contact.htm" id="nav-contact"></a></li>
</ul>
</div>
<div id="post-wrapper">
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
</div> <!-- closes post-wrapper div id -->
</div> <!-- closes nav-and-post-wrapper div id -->
</div> <!-- closes nav-post-portrait-wrapper div id -->
</div> <!-- closes final-wrapper div id -->
</body>
Thank you very much! Hello DevShed CSS Help Forum, I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag: (Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL) http://www.spidersend.com/new_site/newsite4/test6.html However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before? I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd. Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS: Code:
body
{
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: "arial";
background-image: url('images/bottom_slice.png');
background-repeat: repeat-x;
background-position: bottom center;
}
div#header
{
background-image: url('images/header_slice3.png');
background-repeat: repeat-x;
height: 198px;
width: 100%;
}
div#header-content
{
width: 680px;
margin: 0px auto;
}
div#top-navigation
{
width: 680px;
margin: 0px auto;
position: relative;
bottom: 16px;
color: #FFFFFF;
font-family: "arial";
font-size: 16px;
padding: 0px;
}
div#content
{
width: 850px;
float: left;
}
div#content-header
{
background-image: url('images/content_bg_top.png');
width: 850px;
height: 30px;
}
div#content-footer
{
background-image: url('images/content_bg_bottom.png');
width:850px;
height: 32px;
}
div#content-area
{
background-image: url('images/content_bg_slice.png');
padding-left: 18px;
padding-right: 18px;
}
div#adbar
{
width: 157px;
float: right;
}
div#adbar-header
{
background-image: url('images/sidebar_top.png');
width: 157px;
height: 30px;
}
div#adbar-footer
{
background-image: url('images/sidebar_bottom.png');
width: 157px;
height: 26px;
}
div#adbar-area
{
background-image: url('images/sidebar_slice.png');
padding-left: 5px;
padding-right: 5px;
}
div#sidebar
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
color: #0c577a;
}
div#sidebar2
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
margin-top: 20px;
color: #0c577a;
}
div#content-wrapper
{
width: 1007px;
margin: 0px auto;
}
when reading an identifier in CSS IE will treat two dots in a class decleration as one: accepted rules (strict mode): Code: win ie 5.01: p..class, p./**/.class win ie 5.5 : p..class win ie 6 : p..class, p./**/.class, p./**/class, p/**/.class win ff 1.5 : p./**/class, p/**/.class (comments ignored) win opera : (as firefox) win ns 7.0 : none! Hello all, I'm really interested in hearing the opinions of those more seasoned in web development. I have been working hard at learning CSS and believe I have really improved my web design skills because of it. I love working with CSS and have completely freed myself from tables. But... I am so tired of playing for hours with the coding just so my page looks okay in both IE and FF. I'd much rather my page look great in FF (my prefered browser) and to heck with IE. I have made my stand and will no longer design my personal pages for IE. I have a clear message on one of them telling my visitors to wise up and download FF. Of course my audience allows me to get away with this. I realise that if your visitors are average surfers who barely know how to do a search on google, they aren't about to deviate from IE. But for those audiences who have a little more internet experience, do you think it's cool to try and push them into using FF? In terms of usage it's clearly on the rise, IE has been steadily declining. I'd really like to see IE hit bottom. The way I see it, as long us the development community continues to jump through hoops so people can keep using IE or other inferior browsers, there will be little motivation to develop some solid web browser standards. Any thoughts? Yeah, we all know IE sucks because we have to do all types of extra css to make it work. I just did a design update on my site. I did my usual, worked the design with Chrome and Firefox. I got it all working with those browsers, and them I just opened IE 7 so see how much more work I need to do for IE. Well to my surprise, everything was correct. I checked IE 8. Same thing. It all looked correct. Now, I may have had a stroke and didn't know. So I'm asking if someone can look at my site with there IE 7 or 8 and confirm that looks alright. www. netgamegurus .com I just don't believe that I could have coded it that perfect. From my experience it just not possible. Sorry about the URL hack, but I came to this forum for css support and it's kinda hard to get css suport if we can't post URL's to show our css at work. nevermind got it sorted out Quote: hi, i just made a footer the other day and had to realize (at work today) that it is not quite there in IE where it is in FF. it seems to have to do with another element on the page (the navigation) - you will see what i mean by viewing the following page in IE: http://www.chocolateriewanders.com could you just tell me which one of the endless hacks for IE i need to apply - or how you call this alignment problem (then i can look it up in google myself ... i just need to know how you call this) thanks Hi all, I need some help. I know I need an IE hack to make my drop down menu on the header of this page work correctly (hover over 'pictures', 'rides', or 'maps') but for the life of me I can't seem to find what that workaround (hack) is. Please help! Oh yeah, of course, it work perfectly fine in Firefox. Here's a copy of the 2 CSS files I am using for this page... main2.css header.css And yeah, I am still working on the header, that's why it looks kinda empty right now. =) Manny Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! Hey guys nice forums.....am a css noobie i wanna know one thing how do i make a div stretch horizontally 100% , basically i want my website to be divided into 2 colors black and white the lower part would be black and the upper part would be white , now am not using a div container as i read through previous topics before so am using 2 divs as follows <div id="White">White area</div> <div id="Black">Black area</div> when i preview in IE i see the colors as i want but the divs do not stretch 100% as i said in the css. how do i do it ? hope i made myself clear on this As I understand it, IE supports "hover" only when applied to a link, where with Firefox and Safari you can apply hover to any element. I am wondering if any of you know of a hack for IE to make hover applicable to any element. Below is my CSS. Code: .amy-navigation {
padding: 30px 15px 0px 15px;
height: 22px;
float: right;
}
div.amy-navigation:hover {
background-color: white;
text-decoration: none;
border-bottom: solid 1px #b1cc8d;
}
div.amy-navigation:hover > a {
color: #acadac;
text-decoration: none;
}
Using Firefox or Safari you can see what I'm trying to do in my header at www.amydelez.com So, I have an app that allows the user to select images from a list of thumbnails. The thumbnails have an 'on' and 'off' state, but also have a drop shadow. I can get the drop shadow to render nicely in IE6 using a PNG hack, but I can't seem to find a hack that will allow me to use a PNG sprite so I can have the on and off state in the same image. Any suggestions would be great. Hello, Is there a hack for Safari 3. I found this hack : @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } The problem with this hack is that he is valid for all verison of Safari. My need is a hack only for Safari 3. Thank you in advance for your help. I read about a cross browser min-width hack he http://www.hackszine.com/blog/archi..._css_minhe.html Which seemed simple enough, but when I try it doen't seem to work. Here's my code Code: <a href="#" class="nav"><img src="/images/left.gif" alt="" />Next<img src="right.gif" alt="" /></a> Code: .nav {
display:block;
min-width:100px;
width: auto !important;
width: 100px;
background-image: url(/images/btn_section_nav_bg.gif);
}
My end goal is to have a button that can expand to whatever width the text is inside it. Anyway TIA I have been having my share of problems with CSS lately for this one site I'm working on (this is my 3rd thread here about it) and now after researching I believe this one is from what I think is called a box model bug. The problem is this: The border heights for my <div>'s are perfect in FF but when I test in IE the are too long! below is my code and a url to the project. Code:
* {
margin: 0;
padding: 0;
}
body {
background-color:#FFFFFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
#site {
width:775px;
height:500px;
margin:25px auto 0 auto;
border:none;
}
#container {
width:775px;
height:500px;
margin:0 auto 0 auto;
border:1px solid #99CCCC;
}
#header, img {
margin-top:10px;
border:none;
cursor: default;
}
#left {
width:210px;
height:201px;
margin-top:80px;
margin-left:20px;
border-top:1px solid #99CCCC;
border-right:1px solid #99CCCC;
border-left:1px solid #99CCCC;
float:left;
}
#menubar{
background-color:#FFFFFF;
text-align:left;
margin:0;
padding:0;
}
#menubar li {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF9933;
list-style:none;
text-decoration:none;
border-bottom:1px solid #99CCCC;
cursor:default;
line-height:27.5px;
}
#menubar a {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF9933;
list-style:none;
text-decoration:none;
cursor:default;
padding-left:5px;
line-height:27.8px;
}
#menubar a.active {
color:#99CCCC;
}
#menubar a:hover, #menubar a:focus,
#menubar a:active{
color: #FFFFFF;
background-color: #99CCCC;
}
#right {
width:520px;
height:390px;
margin:15px 0 15px 0;
border-top:1px solid #99CCCC;
border-left:1px solid #99CCCC;
float
http://jjs5327.aisites.com/IMD311/index.html Does anyone have some suggestions that will make my sites <div>'s look the same in both IE and FF? I'm trying to apply the min-height hack for IE shown here http://www.greywyvern.com/code/min-height-hack.html It entails floating a 1 pixel wide box, then put your content below, then clear the float. It seems to work fine, but something in my layout is screwing this up royally on IE. Can someone take a look at this on IE and compare it to firefox. What in the world is IE doing here? http://section31.us/temp/rateyourmo...min-height.html That layout is just part of a larger website that i'm working on for fun. http://section31.us/temp/rateyourmovie.com/index1.php I've encountered the italics problem with IE and am trying to work around it. I followed the hack from the http://www.positioniseverything.net...alicbug-ie.html page but it really screws things up. My page is cut, more or less, into 3 sections: header, main, footer. Since I don't use any italics in either the header or footer, the rule needs only to apply to main. It CAN apply to the others, but it doesn't need to. Now, when I apply the hack, instead of my page lining up with the 'header' on the left hand side and the main on the right hand side, it completely pushes my 'main' area down so that it doesn't start until after the header and I have no idea why? I noticed that if I put the hack in each particular page (rather than in the external file sheet) then it works, but why? If you are having problems with Son of Suckerfish and IE7, where the drop down menu will not disappear like it should. Take out the javascript because you do not need it with IE7, but if you still want IE6 to work then put it in. For IE7, you need to add Code: *:first-child+html #nav {
height: 1%;
}
*:first-child+html #nav li {
height: 1%;
}
to your css and you will be fine. Don't ask me why, Don't ask how, i just chalk it up to just IE When the :not pseudoclass is used with an element selector in Firefox, it works as expected, excluding the selector inside the parentheses. But used by itself or attached to the * selector, it applies the rule to ALL elements. This unexpected behavior can be exploited to write Mozilla-specific patches to your CSS code. example:
html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Testing :not Hack</title> <style type="text/css"> :not([id]) p { font-weight: bold; } </style> </head> <body id="thisthing"> <p>This is a test.</p> <p id="test">This is a test.</p> <div>This is a test.</div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> The idea is to set the ID of the parent and browsers which correctly interpret this selector will not apply the rule to anything; also those browsers which don't already support it will simply ignore it. The :not selector is part of the new CSS3 recommendation. Here's just the css code for the hack: css Code: Original - css Code :not([id]) example { /* Moz/FF/Netscape code here */ }
:not([id]) example {
|
|||||||