I searched and wasn't able to find anything related to this. It's a very specific and strange difference between chrome and firefox. If anyone can find the place in the code that's causing it, I would be VERY grateful.
I can't post screenshots, but if you view the jsfiddle in both browsers you'll see what I'm referencing.
Here's my code
http://jsfiddle.net/JSDesign/aJagN/
And a small sample:
<li>
<a href="#">
<span class="ca-icon"><i class="icon-home"></i></span>
<div class="ca-content">
<h2 class="ca-text">Home</h2>
</div>
</a>
</li>
CSS is on the jsfiddle.
Also, I'm using Font Awesome if that matters.
http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css
Thanks a lot!
There was definitely a difference between Chrome/FF. This was occurring because browsers have different default properties. I reset the CSS in the example and then tweaked the CSS accordingly, changing the relative positioning and the margins.
Here is an updated example that works the same across browsers.
Updated/Modified properties:
.ca-menu li a {
margin-top:14px;
}
.ca-content {
position: relative;
top: 36%;
}
Related
I have a .jsp file that we use as a login page at https://com-bb-dev.com.edu and in that file it has a few lines laying out some links/buttons and a live chat button.
<h2><center>Accessibility Options</center></h2>
<ul>
<access class="access">
<img src="/images/ci/ng/fonts.gif" alt="" />
<a href="#" title="Change Text Size"
onClick="page.showChangeTextSizeHelp()">Change Text Size</a>
</access>
<access class="access">
<img src="/images/ci/ng/contrast.gif" alt="" />
High Contrast Setting
</li>
</access>
</ul>
<div id="parature">
<parature>
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);" onclick="return launchChatWindow('http://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="http://com.parature.com/ics/csrchat/inc/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
</parature>
</div>
Up within that same file I have declared some separate styles so that I can modify them without affecting anything else that is in the same . Here is what I declared:
parature
{
float: right;
margin-right: 18px;
position: relative;
bottom: 30px;
width: 138px;
}
access
{
display: inline-block;
margin: 0px -4px 6px;
font-size: 125%;
padding-left: 24px;
}
Of course, this works fine and the buttons and links display properly in Firefox and Chrome. And to my horrid dismay it does not work in IE8. You'll see that the button is treated as a direct down-the-line item and that the two links under accessibility options to not take on any CSS formatting. Is it because they are using styles that I declared locally in the .jsp page? I've already had to go back and discover that the ancient fossil didn't support transparency so that was fun to discover and fix. This is what I've tried so far:
parature
{
float:right;
width: 138px;
}
Because I read that floats don't work if the div doesn't have a width. Not sure what to look for. The IE8 developer pane is a total nightmare.
Thanks.
You are attempting to use custom elements, which you shouldn't be doing, but IE, specifically, will not style any elements it is not aware of. That would include every non-standard element you are attempting to use now.
This can be done using javascript. Google for "html5shim" for an example of how IE is updated to accept HTML5 elements.
EDIT: In addition, the elements you are using inside the ul are invalid since ul can only contain li elements.
There's no opening tag for the li. That could be the problem. If not, you might try using an inline-block on the parature class just to see if the block will render on the page.
Had this issue for a couple days now but I can't for the life of me figure out what's causing it. A few google searches have pointed me a collapsing margin bug but I thought I'd get a definitive answer or at least get pointed in the right direction.
I have a div that is positioned absolutely within a relative div. This div is position varies from mac to pc.
The below screen shot is on a mac
The below screen shot is on a windows pc
This same issue happens on iOS devices as well, and is consistent across browsers.
<div style="position:relative;" id="section3">
<div class="highheader" style=" font-size:42px;position:absolute; top:-8px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>
Above is a text snippet of the code. For some reason it just appears to be interpretting the top:-8px absolute value differently from machines. It's the same for every div I've set up like this. There is a version of this code up on my server where this issue is happening.
www.atomichael.com/mmaplus
Anyway I hope the information provided iss helpful enough, if it isn't please don't hesitate to ask for more details!
I really am stumped on this so any help would really be appreciated. Thank you.
Fonts are not standard. Also, you can add padding, height, or line-height for some adjustments, or even adjust your position. I would start with the font. See:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Just set top:0px and it will work fine for the following divs
<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">VIDEO HIGHLIGHTS</div>
<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px; color:black;" id="categoryname">LATEST NEWS</div>
<div class="highheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">PLUS BABES</div>
<div class="tileheader" style=" font-size:42px;position:absolute; top:0px; left:25px;" id="categoryname">LATEST POSTS</div>
Other option is to create a class and apply different css for chrome and for safari
Probably this hack can work
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
top:-8px;
}
/* Safari only override */
::i-block-chrome,.myClass {
top:0px;
}
}
This is taken from here
Making a footer for a web site I stumbled upon some strange behavior of overlapping Divs. You can see an example at:
http://mike.latysheva.ru/test.html
The issue is that second link is not clickable in IE7 and at least some versions of IE8. Works fine in IE9 and Firefox.
Here is the code, it is pretty simple (you can see full code in page source):
<div style="height: 120px; width: 200px; background: #DDDDDD; postion:relative;">
<div style="height: 40px; padding: 10px;postion:relative;">
<a ...[have to remove an actual link in order to post it here]>Test Link 1</a>
</div>
<div style="height: 40px; padding: 10px;postion:relative;">
<a ...[have to remove an actual link in order to post it here]">Test Link 2</a>
</div>
</div>
<div style="width:250px;height:100px; background:#777777;margin-top:-60px;position:relative;z-index: -10;"></div>
What can be wrong with the code? Does it have something to do with z-index: -10? I'm totally confused ... Please help ...
Thank you in advance!
Try giving the parent of the z-index:-10 div a z-index:1.
See this question: Z-index broken in IE8?
and this one
IE7 / IE8 z-index problem
Could it be that your first two divs are given postion instead of position attributes? z-index needs non-static positioned divs to work right.
It has to do with the order of the divs. Also if you are putting a link over another div which contains multiple divs, the overlay needs a backround. I usually use a transparent png. Otherwise the browser can see through it (ie7 etc).
Solution to problem:
http://jsfiddle.net/Anytech/Gr3ae/1/
I've been struggling with getting a div container element to center along with it's child content and is starting to get frustrating. The inline styling I have for div is as follows:
<body id="body1" style="vertical-align: middle; text-align: center">
<div id="container" style="position: relative; width: 910px; margin: 0px auto;">
<!---Child Content--->
.
.
.
</div>
</body>
When these settings are viewed in IE7, the div container is off-set to the right as the below pic shows:
In order to center it I have to add define the right property in its position style in order to push it toward the center:
<body id="body1" style="vertical-align: middle; text-align: center">
<div id="container" style="position: relative; right: 425px; width: 910px; margin: 0px auto;">
<!---Child Content--->
.
.
.
</div>
</body>
This fixes the problem for IE7:
Predictably however, the formatting is off in IE8, Firefox, Chrome, etc. when applying the second styling format above:
Firefox (same behavior in Chrome and IE8)
Hope it's a simple fix, I don't understand why IE7 treats the styling differently. Any help is appreciated.
UPDATE:
#Dan Hardy, adrift - If I could accept both your answers I would, thanks guys it worked. That is very strange behavior, I figured by now I wouldn't have to cater to specific browsers.
This paves the way for a fix, but isn't strictly a fix:
You can add conditional browser specific statements into your HTML code:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Basically what you can do is add the comment's below to your page:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="conditional_ie_7_stylesheet.css" />
<![endif]-->
Between those tags you could add the necessary styling to offset the issues on specific browsers.
As I've said, this doesn't fix your CSS problem but it provides an alternative.
If you put !ie7 after the width attribute, it will be ignored by browsers other than IE 7:
right: 425px !ie7;
For a better explanation of this, see this SO question and the accepted answer:
Bang IE7 - What does it mean?
I leave it to you to decide whether this is too 'hacky', but it is used in the Stack Overflow css.
Was able to get the html in the original question to work fine in IE7 when you remove the position: relative from the div. There is also the chance that there are interactions in the content html/css that is causing the underlying issue so if this doesn't fix it could you post the content html/css that you have that demonstrates the issue in the screenshots that would be helpful.
I've spent too much time trying to get this to work on IE 7. It's working on ff and the only errors coming up on validator are missing alt tags for images (9 errors).
The entire site works except for this one part, and so I'm wondering if there's a weird float bug that I'm unaware of.
I have a div with an image inside of it. Under the image I have 3 divs that contain images. There is a slight gap between the image at the top of the div and the divs under it
Here's my code:
<div class="header_banner">
<img src="html_images/banner.jpg" />
<div class="header_left"></div>
<div class="header_main" id="header_menu">
<ul>
<li>Home</li>
<li>Studio</li>
<li>School</li>
<li>Events</li>
<li>Shop</li>
</ul>
</div>
<div class="header_right"></div>
</div>
Here's the CSS:
.header_banner
{
float:left;
width:531px;
}
.header_left
{
float:left;
background-color:#003399;
background-image:url('../html_images/header_left.jpg');
background-repeat:no-repeat;
background-position:48px;
width:55px;
height:33px;
}
.header_right
{
float:left;
background-image:url('../html_images/header_right.jpg');
width:7px;
height:33px;
}
.header_main
{
float:left;
background-image:url('../html_images/header_main.jpg');
background-repeat:repeat-x;
width:426px;
height:33px;
}
I wouldn't be surprised if I'm just missing something, but I've read through it 3 times now.
Any ideas? (I've setup a background-color to see exactly where the gap is)
Thanks
I would recommend using a reset stylesheet (or insert reset styles into the top of your stylesheet). It can help you avoid all sorts of issues like the one you are seeing.
You're right; it's probably an Explorer bug. Here's some more info: http://www.positioniseverything.net/explorer/floatIndent.html
It seems to be an issue with how IE handles margins. See if defining a margin (0px in this case) helps.
Have you tried adding style="display:block;" to your img element?
I also remember reading that whitespace after an tag can cause problems. Try adjusting your markup by removing the whitespace:
<div class="header_banner"><img src="html_images/banner.jpg" /><div class="header_left"></div> etc..