On my website I've got a style (class="more") that is overrunning its bounds and doing something strange. I'm not enough of a css guru to know how to fix this. Please take a look:
http://www.zerogravpro.com/
Now look at my screenshot describing the problem:
https://www.chainedpayments.com/temp/zgp.png
How can I fix this? Additionally I really like that little "more" snippet of image and css, and would love to be able to use it in more places. But the css is really awkward and when I try to use class="more" in other places, it doesn't look right. In fact just using it in the 1 place on my home page is causing the problem shown in the screenshot.
I'd really appreciate any help offered.
You set it so all <p> tags inside #bodyPanel have that image as their background.
Correct way to do it:
HTML
<p class="man_bg">Blah Blah blah</p>
CSS
#bodyPanel p {
margin: 0 0 0 54px;
padding: 0 42px 35px 150px;
color: #0F0F0F;
}
#bodyPanel p.man_bg {
background: url(images/papersandsky.png) 0 0 no-repeat white;
}
#bodyPanel p{background:url(images/papersandsky.png) 0 0 no-repeat #fff; margin:0 0 0 54px; padding:0 42px 35px 150px; color:#0F0F0F;}
You have that background set to apply to all p tags within anything containing the id of #bodyPanel
You need to probably be more specific with your selectors and add a class to any p tag where you want the background.
Related
I have downloading the responsive framwework http://996grid.com/ and in the Normalize.css it has default settings of padding: 0 0 0 40px; for various items. for example
menu,
ol,
ul {
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
Can someone explain the reasoning of this as when I add a ul it adds 40px onto it... If I remove the 40px in the normalize will it effect browser support?
Thanks for your help
In the official Normalize.css (available at https://github.com/necolas/normalize.css/), there is no such padding, however most browsers will add this padding anyway to simply give the list some indentation from regular text.
If you want to remove this, simply modify the provided CSS or override it within your own CSS:
menu,
ol,
ul {
padding: 0;
}
dd {
margin: 0;
}
It's up to you to style your own documents however you like; aside from the default styles defined in the HTML specification, most browser default styles are simply there to make simple unstyled documents a bit prettier.
According to Erik Meyer it's a remnant from Mosaic. He said it at the end of Web Platform podcast episode 139
I was trying to set a background image in a joomla template in header position, I modified the file template.css and it displayed the background image but not correctly, I could see only the a part on the left and the right of the new backgournd image and the rest is hidden (the white background covered it), I dont know what I did wrong:
Here is the template URL link:
http://vitadorotest.hhc-netzwerk.de/
Here is my CSS coding part :
body.font-size-is-default {
font-size: 13px;
line-height:19px;
color:#8f8f8f;
font-family:Arial, Helvetica, sans-serif;
background:url(../images/background.jpg) 50% 0 no-repeat #fff !important;
height: 95px;
margin: 0 auto;
width: 1087px;
}
this is the real problem,,
white_tail.gif is a while image that cover the the defined id with while background.
#rt-top,
#rt-header,
#rt-menu,
#rt-showcase,
#rt-feature,
#rt-utility,
#rt-breadcrumbs,
#rt-maintop,
#rt-main,
#rt-mainbottom{
background:url(../images/white_tail.gif) 50% 0 repeat-y;
}
just comment it like
/*background:url(../images/white_tail.gif) 50% 0 repeat-y;*/
and see the result.
I added some backgrounds using the added tag on the article home page of http://colorta.com & its working.
<div style="background-image: url(images/banners/myimage.jpg); ">
On the site I'm working on, for some reason the margin is needing to be different for Safari than in FF, IE8, Chrome & Opera? I have a link that I want lined up next to a label. It's lining up fine in all but Safari which needs a 12 pixel difference. Here's a screenshot to better describe the issue: Click
The Safari screenshot shows the label down too low. This is the CSS I use for the working 4 browsers:
.submitter a {
float: right;
margin: -2px 0 0 2px;
padding: 0 !important;
}
And here's the code that works for Safari, however, usig it throws the link UP 12 pixels.
.submitter a {
float: right;
margin: -14px 0 0 2px; Works in Safari & Chrome
padding: 0 !important;
}
Anyone able to shed some light on this? TIA
This seems to sort it out:
.submitter a {
float: none;
display: inline !important;
margin: 0 0 0 2px;
}
It's really very convoluted in there due to nonsensical use of the cascade.
Some rules are being applied to elements where they really shouldn't be due to selectors like:
.box_777 ul li a
You'd be better replacing that selector with something like:
.individual-likes > a
But, it's difficult to predict how improving your selectors will change how your page displays.
The reason it goes up like that could be because of the - pixel value. Are they nested correctly in the div? And did you apply the same alignment (CSS, Html, etc.) for the Chrome buttons?
There is a lot going on, but you might try one of the following:
.submitter .smalltext { float: left; }
(or)
Move the "follow" anchor tag before the "smalltext" span
Looking at the site, the anchor is being set to block by .box_777 ul li a and then floated right by .submitter a.
If I remove the display: block; and float: right; things align.
This is my code:
<div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div>
This is what it currently looks like:
http://i48.tinypic.com/2dqvo1i.png
Is there a way to add padding to the sides of the highlighted text? Regular padding on the SPAN doesn't work, because it only takes into account the the beginning and end of the sentence, not every line separately.
Any ideas? CSS3 code is fine.
After struggling for some time I found a non-quirky solution with a decent fallback for older browsers – adding two CSS3-shadows to the lines of text:
span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
white-space: pre-wrap;
Not really a solution, but does add some space before the break.
Just pad the "p" tags that surround the spans. The "p" tag (unlike span) is a block-level element, so padding on the top, bottom, or sides will work as expected.
Try inline-block. It won't work in anything older than IE8 (though there are some work arounds), but everything else popular should be fine:
p span {
display: inline-block;
padding: 0 2em;
}
A simple way is to add this to your style sector definitions:
span {
padding-left: 8px;
padding-right: 8px;
}
Also it works for "p" (and for others) instead of "span".
Finally found a way out this misery. Worked for me. Use a button on the left like this.
<p>
<button class="blankspace">
</button>
<span>
</span>
</p>
and css it like
.blankspace {
background: none;
opacity: 0.0;
outline:0;
text-decoration: none;
width: 2%;
height: 80%;
margin:0 auto;
float:left;
text-align:right;
padding:0%;
font-size:2px;
}
Instead of adding two CSS3-shadows as suggested, here is a much simpler answer:
use display:block
<span> is display:inline by default, so the borders and padding you added aren't actually affecting it's size. So only the first line is affected.
Use display:block on the span and <span> now works like <p> and <div>.
Here's a good explanation:
http://quirksmode.org/css/css2/display.html
i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d