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!
Related
I'm having hard time with an unordered list ul full width background on mobile. When I test it with Chrome, full width background shows without any issues (1st image below) but when I check it on my phone, I dont see the background (2nd image below).
The website address is here
.tabs--primary {
width: 100%;
background: #E9E8E8;
border: none;
position: relative;
padding: 15px 0;
margin-bottom: 1px;
min-height: 60px;
display: flow-root;
}
.tabs--primary:before, .tabs--primary:after {
content: "";
position: absolute;
background: #E9E8E8;
top: 0;
bottom: 0;
width: 9999px;
}
.tabs--primary:before {
right: 100%;
}
.tabs--primary:after {
left: 100%;
}
I believe this is an issue relating to iOS Safari, currently not supporting display: flow-root;. Most desktop browsers, however, including Chrome, currently support this feature.
This is most likely why you have different results based on if you are viewing the website on your desktop vs your iPhone.
CanIUse display: flow-root;
Depending on how your CSS is set up you can try just using display: block; instead. However, if you are using it as a way to create a new block formatting context you will have to use some workarounds to get it to work. Here's a great article about the clearfix hack.
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 found a full CSS tooltip to use in a new site. It works perfectly in Safari and Chrome. But only in Firefox, the tooltip keeps hovering to the far left of the DIV no matter where the link is on the page.
I found this question on this site that was extremely close, but did not give me the answer I needed.
CSS Tooltip hovering position issue
Could it bug in Firefox, or is there additional code i need to add for Firefox specifically?
I did make sure relative and absolute positioning were correct according to rules on setting that up. I am still very new to all of this. So any help would be appreciated.
Thank you.
Here is my code:
a.tip2 {
position: relative;
text-decoration: none;
}
a.tip2 span {display: none;}
a.tip2:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: 120px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
background: rgba(0,0,0,.8);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
color: #fff;
font-size: .86em;
}
a.tip2:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom: -20px;
left:1em;
}
I have had a similar problem with Firefox positioning the hover image in a different location than IE, Chrome, and Safari.
I changed the css specifically for Firefox:
/*Firefox*/
#-moz-document url-prefix()
{
a.enlarge:hover span{top: 250px; left: 20px;}
}
whereas for the other browsers I am using top: -200px
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)
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.