I have a little problem that I cant solve.
I made a dropdown menu, and its OK but in Chrome I can only see the hover effect on the child elements, and can on the parents.
In FF and IE its OK only Chrome is the bad one, could someone give me a hint?
nav.main_menu {
position: relative;
top: 29px;
left: 220px;
bottom: 1px;
height: 90px;
width: 680px;
z-index: 3000;
}
div#container {
width: 980px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
z-index: 1000;
}
It's OK in any other browsers but not in IE
Are you using a CSS reset sheet. I find that solves some of my cross browser issues.
http://meyerweb.com/eric/tools/css/reset/
(you should really show your markup)
Related
I created a custom header for a pre-made responsive theme. It looks great in chrome, but both firefox and ie aren't showing all of the menu items and are positioning a logo::after shadow in a weird spot.
I already verified that there are no errors in my code and tried implementing normalize.css, but nothing has worked to fix the problem.
This is the code I'm using:
.logo::after {
content: "";
background: transparent url("/wp-content/themes/porto/images/shadow.png") repeat scroll 0% 0%;
width: 247px;
height: 14px;
position: absolute;
top: 64px;
right: 30px;
min-height: 0px;
}
#main-menu {
position: relative;
margin-right: 15%;
margin-bottom: 2%;
}
What am I doing wrong here? Thanks for the help!
I'm working on a responsive layout with the following css:
#page_container {
max-width: 960px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0;
}
#header {
position: relative;
top: -10px;
padding:0;
height: 190px;
}
#logo_image {
position: absolute;
left: 250px;
top: -10px;
}
#media only screen and (max-width: 960px) {
#logo_image {
position: relative;
margin: 0 auto;
max-height: 150px;
top:0px;
left: unset;
}
The idea is that below 960 px in width the logo image should be smaller and centered. This is working fine in firefox, but in chrome the "left: unset;" is not being processed and the image is appearing far to the left of center.
I am not aware of any compatibility issues with unset and in fact use it elsewhere on the page without problems. Am I missing something obvious here?
Unset is not supported in Chrome:
https://developer.mozilla.org/en-US/docs/Web/CSS/unset
Use auto instead.
Update (Feb 2016)
Chrome now supports unset as of version 41.
'unset' was previously unsupported in Chrome, but it is now supported. The example now works similarly in Chrome and Firefox.
Chromium has supported 'unset' since December 2014:
https://codereview.chromium.org/775153002
I checked my Tumblr theme on IE and the footer is in the middle of the page and here is the code I have.
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
width: 100%;
position: absolute;
left: 0px;
bottom: -38px;
}
Is there an Internet Explorer 9 solution to that?
Ryan Fait has the best cross browser solution to a sticky footer
See Here
But there are countless examples of sticky footers using just CSS on stackoverflow.
Based on the code provided, I would guess that you need to change it to something like this-
#mastfooter {
background-color: #4F3117;
height: 295px;
clear: both;
margin-right: auto;
margin-left: auto;
width: 100%;
position: fixed; /* keeps the footer visible even when scrolling*/
bottom: 0px;
}
Note that the top and bottom margins have been removed, they were most likely the cause of the positioning problem.
i have problems with the alignment of divs.
My layout consists of one div view_central which contains three other divs namely view_central_top, view_central_left and view_central_right. Chrome and FF render the wanted result: a top div with a bannner, the navigaiton to the left and the content to the right.
IE 7 offsets the content div view_central_right 10 px to high thus covering part of the banner div view_central_top.
The css code looks like this:
.view_central
{
position: relative;
width: 827px;
height: 100%;
}
.view_central_top
{
position: absolute;
top: 0xp;
left: 0px;
height: 118px;
width: 828px;
}
.image_borderless
{
border: 0px none;
}
.view_central_left
{
position: relative;
left: 0px;
top: 118px;
width: 187px;
height: 683px;
background: #C7D2EB;
font-size: 11px;
}
.view_central_right
{
position: relative;
left: 0px;
top: 118px;
width: 640px;
height: 683px;
background: #FFFFFF;
}
Can anyone help me out. Thanks.
My first thought -- browser dependent padding or margins. A CSS reset (at least for div elements) might be worth trying.
There are two <div></div> tags. When it is browsed using Firefox, the effect is desirable. There is a gap between .steven and .john. However when it is browsed using IE, the effect is undesirable; .Steven and .john are connected together(There is no gap). How to solve this problem?
.steven{
position: relative;
width: 620px;
left: 55px;
float: left;
}
.john {
position: relative;
width: 270px;
right: 35px;
float: right;
}
Have you used a Reset CSS?
Different browsers have different defaults for display on different elements.