I have a navigation with a padding-top: 148px; in Firefox, Chrome, Safari, IE 9 & 8 its looks perfect, but in IE 7 its gives it too much, you can see an example of this at http://willruppelglass.com/index.php why is it doing this and how do I fix it?
Here is the CSS
.headerNav{
color:#000;
margin:0 auto;
width: 1280px;
padding-top: 148px;
}
Any help would appreciated, thanks in advanced.
Try to use below structure and adjust the padding of the <div class="headerNav"></div> because the upper elements have float:left property and you are using padding-top:148px; in IE7 the padding is applying inside the headerNav itself in comparison of other browsers.
In other browsers the padding is applying from the top of view port.
<div class="headerText"></div>
<div style="clear:both"></div> <!--this will clear the floating property for below elements and make the space and adjust all the elements below this div -->
<div class="headerNav"></div>
In below image (IE7) you can see the padding-top:148; is applying with in the div not from the top of the body.
See the padding-top:148px applying from the top of the body/viewport. in below image (Firefox)
Related
I've got a CSS :hover pseudo-class that is not producing any results.
I was messing around with some image gallery code, and I've managed to get this snippet that doesn't work. I can't figure out why. Some of the weirder CSS rules regarding size here are because these divs normally contain images. I removed the images for simplicity, but left the rules in.
Other :hover elements on the same page are working.
I'm not sure what else to say about the problem, since this is so basic. I'm probably missing something really obvious.
JSFiddle here -
http://jsfiddle.net/GbxCM/
In some cases (mostly with absolute positioning), you cannot apply a :hover pseudo-class to something with display: inline-block;. (If you have Chrome, use inspect element and add the :hover trait yourself--notice, it will work perfectly! The browser just doesn't register the :hover itself.)
So, I went ahead and replaced this with float: left;, added a margin (to simulate the inline-block look), and changed the br to a clear. The result is in this jsFiddle.
If I'm guessing correctly what you're trying to do, then you don't need to change the positioning or any of that. The only change I can see you wanting to make is changing the background color. Here's the fiddle I made to clarify that response.
Here's the code for readability's sake:
HTML
<div class="wrapper">
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<br>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
<div class="squareswrapsolo"></div>
</div>
CSS
.wrapper {
height: 600px;
width: 600px;
overflow: hidden;
position: relative;
}
.squareswrapsolo {
height: 100px;
width: 100px;
display: inline-block;
overflow: hidden;
background: #ccc;
}
.squareswrapsolo:hover {
background: #000;
}
For me The problem was with my Chrome setting, I was testing my multi-platform web application with chrome in Mobile view for which the hover event is by-default disabled.
You can disable the Mobile mode by clicking the mobile icon in the top-left of Elements tabs as shown in image.
Moreover, to check if your :hover event is setting the desired css property or not you can force-trigger the hover event from chrome (by checking hover in styles> :hov> hover red marked in image) and check if the :hover CSS property is working or not. For me it was working fine so I was sure that the event is not triggering.
I fixed it with removing a z-index: -1 from a wrapper element
a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.
I have the following CSS and HTML:
.TestPadding{
width:29px;
text-align:center;
height:18px;
padding:3px 0px 2px 0px;
margin:2px 1px;
font-family:Trebuchet MS;
font-weight:bold;
font-size:13px;
border:2px solid black;
float:left;}
<div class="TestPadding">1</div>
<div class="TestPadding">2</div>
<div class="TestPadding">3</div>
<div class="TestPadding">4</div>
<div class="TestPadding">5</div>
<div class="TestPadding">6</div>
<div class="TestPadding">7</div>
<div class="TestPadding">8</div>
<div class="TestPadding">9</div>
<div class="TestPadding">10</div>
The problem is that the rendering is different in IE and Chrome. Here's what it looks like:
Chrome is on top and IE on the bottom. On IE, the numbers don't look vertically aligned. I tried making all sorts of combinations on the CSS but none have given me a consistent vertical alignment and sizing.
If you want to try it out, there's a **fiddle here.**
Thanks.
Try using line-height:18px; and no vertical padding (padding:0 2px;).
You could always use a little IE hack:
_padding-top:4px (for example)
If you do choose to go down the IE hack root, here's how to apply to the different versions of IE:
padding-top:4px\9; - IE8 and below
*padding-top:4px; - IE7 and below
_padding-top:4px; - IE6
Al
Do not use padding but use line-height (preferable use the unit em) on the divs.
By the way, I suggest that you even don't use divs but a list (ul width lis).
They are correctly middle-aligned in IE. Try adding a q in one of the boxes, and you'll see exactly what I mean.
You can "fix" this and get Chrome's look by adding: line-height: 18px;.
It's because Chrome and IE have different values for default line-height.
Set the line-height to 19px and it should vertically align in both browsers
I've tried various fixes but I'm still unable to solve this rather irritating issue in IE8. I have a container Div containing two child Divs, one floated left and the other floated right. There is a background image applied to the container DIV and this renders as it should in ie6 and ie7, however in ie8 it just will not appear. I think the issue is that the top padding applied to both child elements is not being respected/applied by ie8, and since the background image has a height of only 11px, the two child elements are sitting flush up against the parent DIV and therefore the background image is not displaying.
Here's my code and CSS:
<div id="bottom">
<div class="moduletable_footermenu">
<ul class="menu"><li class="item56"><span>Class Schedule</span></li><li class="item57"><span>Testimonials</span></li><li class="item58"><span>Contact</span></li><li id="current" class="active item59"><span>Sitemap</span></li></ul> </div>
<div class="moduletable">
Copyright © -2010 sitename </div>
</div><!--end of bottom -->
CSS:
div#bottom {
clear:both;
width:1014px;
margin:0px auto;
background:url(../images/footer-shadow.gif) top no-repeat;
}
div#bottom div.moduletable {
width:400px;
float:left;
font-size:0.9em;
color:#ccc;
padding:15px 0px 15px 0px;
}
div .moduletable_footermenu{
float:right;
padding:15px 30px 15px 0px;
}
It must be something specific to IE8 and probably something quite small causing the issue here - can anyone please spot the problem ? I just can't seem to solve it no matter what I try.
Grateful for any help.
Thanks in advance.
Have you tried Firefox and Chrome/Safari? Did you use standard DOCTYPE? They should behave the same way as IE8 did.
In standard CSS, container's height will not be adjusted to the height of the floated boxes; I will expect IE8 to not showing the container (height=0px) being the fact it's a more standard-compatible browser.
If you are looking for effects in IE6/7 in a standard-compatible browser, search for 'clearfix' solutions.
A div, containing a table has the following CSS styling:
#formulaAlts {
float: right;
height: 200px;
overflow: auto;
}
This makes it so that when the table is >200px, a scrollbar appears only for the table and the other elements on the page stay put. Great!
Now for our friend IE...
In IE, the element spawns the vertical scrollbar without growing the containing element. To "solve" this, a horizontal scrollbar is created.
That sucks. And I don't want it to suck...
Any ideas?
--EDIT--
I found out that the line
overflow-x: hidden;
forces IE to ignore the horizontal scrollbar. This is better.. but not quite there because now part of my table is invisble.
Careful.
overflow-x
isn't the most widely supported attribute out there.
I tend to go with a containing div with some right padding:
CSS:
div.scroll {
overflow:auto;
padding-right:6px;
/* I've found 6px to be just right my purposes, but try others*/
}
EDIT: You'll need to add a height attribute somewhere for this to work! I usually have a default set in the div.scroll declaration then tweak that for specific cases (most).
HTML:
<div class="scroll" >
<table>
<!-- your table stuff in here -->
</table>
</div>