I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
Related
My site actually works okay in other browsers but when I checked in IE6, there is a problem. In my global navigation, I clicked this certain page. For example, I clicked ABOUT ME page. My global navigation changes its image when the page is active. Like it has a different color from inactive pages. In IE6, when I'm in the current page, ABOUT ME, the current image in the global navigation is different. Say, it's CONTACT US. But when hovered, the image that appears is correct.
This is the snippet of CSS:
.cat-item-5 {
float: left;
display: inline;
width: 162px;
height: 48px;
text-indent: -30000px;
background: -639px 0 url(images/menu.png) no-repeat;
}
.cat-item-5 a {
display: block;
width: 162px;
height: 48px;
background: -639px 0 url(images/menu.png) no-repeat;
}
.cat-item-5 a:hover,
.cat-item-5.current-cat a {
background: -639px 0 url(images/menu_o.png) no-repeat;
}
Hope you can help me, thanks!
IE6 has really really bad CSS support. It also has some nasty little bugs, of which you've been tripped up by one.
The bug is that when you have a double-class selector like .cat-item-5.current-cat, IE6 will only see the first of those classes, so it acts as if the selector is just .cat-item-5.
There's no good way around this bug. The only solution is to add another class to the relevant elements, and select that instead.
Your only other option is to simply drop support for IE6.
Being a web designer I hope to make websites that at least work in as many browsers as possible. I still try to design for IE 7 for those visitors only using IE and who don't know anything else. However I'm not too familiar id IE and it's spacing and it's hacks.
My website looks good, you can view it here, in every browser except IE. :s Thankfully it's only the footer now.
I'm hoping someone can give me advice and help me fix this hiccup and then maybe give me some references or articles about IE & it's spacing issues & hacks.
My footer doesn't work in either IE 7 or 8.
IE 7:
IE 8:
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; margin-top: 100px;/*border: 1px solid #0C0;*/}
#footer a { text-decoration: underline; color: #c7bd89 !important; }
#footer a:hover { text-decoration: none; color: #fff; }
#footer h6 { background: url(img/FOOTER-HR-BG.jpg) left center repeat-x; text-align: left;}
#footer h6 span { background: #8e2023; display: inline-block; padding-right: 5px; }
I've tried a bunch of different ways but I'm not sure whats happening in IE with this footer. If anyone can shed some light on what might be happening, it would be greatly appreciated!
you have an unclosed aside element for starters. if you view it in ie8 and use f12 developer tools you can see how the footer is now a child of the element. close that guy out....should help out.
I'm not sure of the root of the problem but instead of using "float: right;", using "position: absolute; right: -2px;" seems to solve the issue (also ensure #searchform has a relative position).
I'm developing a Grails app and I need to modify some elements' style. I tried to add a css class to the main.css file but it is not working.
In /web-app/css/main.css:
.artistItem {
background-color: #444;
border: 1px solid #fff;
padding: 10px;
color: #ccc;
width: 200px;
}
In the .gsp:
<div class="artistItem">Some text</div>
But the div remains unchanged. Am I missing something?
Thanks!
This isn't a direct answer
Playing around with CSS in grails can be a little frustrating for someone that hasn't had a lot of exposure to CSS in general (I'm speaking form experience). Grails provides a nice clean CSS for a good starting point but trying to build on it without understanding CSS can cause some pain.
I would recommend looking at a couple tools like FireBug for firefox or Chrome's built in developer tools, IE also has a nice developer tool. These tools allow you to see how the browser is rendering your page and what CSS elements are being used or not used. They also expose the javascript console and several other nice debugging tools. I believe this are essential tools to help understand what the browser is doing.
I hope this helps!
Try:
.artistItem {
background-color: #444 !important;
border: 1px solid #fff !important;
padding: 10px !important;
color: #ccc !important;
width: 200px !important;
}
If that works, then you know there is another css stylesheet overriding it. If not the css is not being included properly.
I've got a CSS conflict that's preventing me to set the width of a div and I'm really struggling to see where it is.
Can someone give me a hand?
It's this div here:
body.node-type-campaign #com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
A link to the page: http://www.wdm.org.uk/test-campaign
Thanks!
Remove the inline-style width:auto; from <div id="com_col_two">
Have you tried just:
#com_col_two {
width: 400px;
padding: 0;
border: 1px solid blue;
}
And remove all the added properties on the <div> tag?
You have a lot of classes applied to the elements in your page.
Also, have you tried using Firefox with Firebug. I'm sure a lot of people would recommend using that.
Check out FF's Web Developer Toolbar or Chrome's Developer Tools: both have a CSS view which shows you which style definition affects this specific element (it is triggered by rightclick->Inspect element).
I am having issue with png image on IE6 and tried to search every where but no success.
I am using this css code for displaying png image .Is there any problem.
Please let me now.
.bottom-box {
width: 210px;
float: left;
margin:5px;
position:relative;
padding: 5px;
text-align:left;
height: 150px;
min-height: 150px;
background-image: url(/images/trans-box.png);
color: #FFF;
line-height: 20px;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/trans-box.png', sizingMethod='scale');
}
Thanks! In advance.
IE6 hates pngs, it's a sad fact... but you should try using conditional comments instead of that underscore hack... edit your CSS to be:
.bottom-box {
width: 210px;
float: left;
margin:5px;
position:relative;
padding: 5px;
text-align:left;
height: 150px;
min-height: 150px;
background-image: url(/images/trans-box.png);
color: #FFF;
line-height: 20px;
}
Then in the HEAD of your HTML add in:
<!--[if lte IE 6]>
<style>
.bottom-box{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
sizingMethod='scale');
}
</style>
<![endif]-->
Or you could just use a GIF or something just for ie6, using hacks/conditional comments.
The filter: property is IE-specific BTW.
you could also try the star hack, instead of the conditional, edit your CSS as above but add this rule:
* html .bottom-box{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
sizingMethod='scale');
}
since it is technically valid CSS it might work better.
Also it's probably useful to know that IE6 & this PNG fix won't work with background-position or background-repeat. it will not tile PNGs as backgrounds, so again I'd suggest using a gif or something for IE6.
IE6 does not support PNG transparency directly, but you can hack it in via a CSS filter. But, thankfully, there's no need to do it yourself. A fix that works automatically (and very well) is available at http://www.twinhelix.com/css/iepngfix/. Installation is simple and will dynamically add the appropriate directX filter commands to any PNG images in your page.
The only drawback is that, since this fix applies AFTER the dom is loaded, there will be a short period when the PNG un-transparency will be visible, so there's a brief flash of ugliness before things start looking as expected.