I am just finishing a small website and noticed in IE7 that the logo is hiding behind an image on the home page: http://reapvalue.com/
Here is the html:
<div id="wrap">
<div id="header">
<ul id="main-nav">
<li>About</li>
<li>What We Do</li>
<li class="last">Contact</li>
</ul>
<h1><img id="logo" src="/photos/logo.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
<h1><img id="logo-small" src="/photos/logo-small.png" alt="REAP - Renewable Energy and Preservation, April Montgomery, LLC." ></h1>
</div><!-- end #header -->
<div id="tagline">
<span class="green">renewable energy</span> <span class="magenta">and preservation</span>
</div>
<div id="main" class="clearfix">
<div id="Stage" class="EDGE-909290339"></div>
<img id="lead-image" src="photos/hickory.jpg" alt="hickory, nc preserveration district">
Here is the CSS:
#header { width: 960px; height: 53px; margin: 0 auto; position: relative; }
body#inside #header { height: 56px; }
img#logo { position: absolute; top: 0; left: 0; z-index: 5000; }
Despite setting the z-index to 5000 it still hides behind the image. Any help in getting the logo to the front will be greatly appreciated.
Thanks.
I can't really explain why, but z-index in IE7 and IE8 acts weird.
If you're using z-index, and want it to work in older IE browsers, you need to make sure your parent element has an heigher z-index then your element.
For example, give your #header a z-index: 6000; and it'll be fixed.
I hope someone can give you an better explanation as to why this works, as I would like to know aswell myself.
EDIT: I've googled abit and found this interesting post:
http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Related
I need to make one element in the sidebar css position:sticky.
I've added the image to the Sidebar - using the Customisation feature.
And added the css - using Customisation/Additional CSS.
But the element scrolls normally with the other elements in the sidebar.
The html looks like this (just an extracted bit):
...
<div id="sidebar">
<div id="sidebar-core">
<aside class="widget widget_recent_entries">
<h3 class="widget-title">Recent Posts</h3>
<ul>
<li>
Aston Martin DB7 Volante – For Sale
</li>
<li>
How a DB7 and a Vanquish specialist met
</li>
<li>
6 cylinder Cam Cover
</li>
<li>
Aston Martin DB7 Dashboard Repair
</li>
</ul>
</aside><aside class="widget rl-image-widget"><h3 class="widget-title"></h3><img class="rl-image-widget-image" src="http://astondb7.com/wp-content/uploads/2019/01/AstonMartinBadgeA.png" width="800" height="240" title="Aston Martin Badge" alt="Aston Martin Badge" style="margin-left: auto; margin-right: auto; display: block;" /><div class="rl-image-widget-text"></div></aside>
</div>
</div><!-- #sidebar -->
...
And the css is:
.rl-image-widget-image {
position: sticky;
position: -webkit-sticky;
width: 300px;
height: 80px;
top: 60px;
justify-content: center;
align-items: center;
}
#sidebar-core { height: 800px; }
I've tried adding 'overflow:visible' to the parent elements, but didn't solve it.
Site is runnning WP5.6.2 and the the Shuttle theme.
It reacts to position:fixed, and position:absolute, but not 'sticky' ;(
Add a sticky class to parent div i.e.:
aside.widget.rl-image-widget {
position: sticky;
top: 60px;
}
I thought it was the 'parent' that must not have 'overflow: hidden' but then I read that it's ANY ancestor. So tracking back, I found that the theme's 'Content' is/was 'overflow: hidden' - I changed it to 'visible' - and now my element is 'sticky'. Now I have to find any ramifications of so doing.
I am using left: auto; in the hope of overriding left: 0; but it is not working (see jsfiddle) - I want <header class="h1..."> to be center aligned.
HTML:
<div class="root">
<header class="h1 header-opacity-enabled sticky-enabled sticky-no-topbar menu-animation-enabled hover-delay-enabled sticky-collapse sticky-opacity-enabled with-search-box with-cart-box lr-mi-with-widget-visible sticky" data-sticky-trigger-position="400" data-menu-slidedown-duration="400" data-menu-slideup-duration="500" data-menu-fadein-duration="300" data-menu-fadeout-duration="400" style="top: 0px;">
<section class="main-header">
<div>
<div itemtype="http://schema.org/Organization" itemscope="itemscope" class="title">
<div class="logo-wrapper"> <a class="logo" href="https://websitetechnology.dev/" itemprop="url"> <img alt="Doig Website Technology" src="https://websitetechnology.dev/wp-content/uploads/2016/04/logo3-blue.png" itemprop="logo" height="77"> </a>
<h3>Website Engineering, Optimisation & Advertising</h3>
</div>
</div>
</div>
<div class="shopping-bag">
<div class="widget woocommerce widget_shopping_cart">
<div class="widget_shopping_cart_content">
<div class="wrap">
<p class="empty-item">There are no items in your cart.</p>
<!-- end product list -->
</div>
</div>
</div>
</div>
</section>
<div class="s-801"></div>
<div class="s-981"></div>
</header>
</div>
CSS:
.h1.sticky.sticky-opacity-enabled .main-header {
background-color: #FFFF00;
}
#media screen and (min-width: 801px) {
.root header.sticky-enabled.sticky {
margin: 0 auto;
width: 1236px;
padding: 0;
max-width: calc(1070px + 10%);
}
.root header.sticky {
position: fixed;
top: auto;
left: auto;
width: 100%;
}
}
Live site here. Scroll half way down the page until the sticky <header> pops down from the top of the window.
left: auto; is being applied, yet the <header>' is stuck to the left side of the screen. This` needs to be center aligned.
Can you help please?
I have try to solved you and attached screenshot please find it. screenshot will help you to solved your issue.
Thanks,
It must be because css specificity. In a few words:
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of CSS selectors of different sorts.
If you give more specific selector, you can override the settings.
In Example, a more specific selector then your would be:
div.root header.sticky {
or
body div.root header.sticky {
...
This could help: Specificity calculator
Also, if you view in Chrome i.e. you can see if a css settings was overriden by being marked as struck through
put your header inside this section
<section style="padding: 0;max-width: calc(1070px + 10%);margin: 0 auto;">
<!--- put your header section here ---->
</section>
I made a logo in svg and implemented it on my website. It works well in all browsers EXCEPT safari
Here is a fiddle
NOTE - you muse use safari to recreate my issue. Viewing the fiddle in any other browser shows it like its suppose to be.
Here is my html for the navbar
<div class="navsection">
<div class="w-nav navbar" data-collapse="medium" data-animation="default" data-duration="400" data-contain="1">
<div class="w-container">
<a class="w-nav-brand" href="#">
<img class="logo" src="https://dl.dropboxusercontent.com/u/66131799/JA_logo_2014_svg.svg" width="100">
</a>
<nav class="w-nav-menu mobilenavmenu" role="navigation"><a class="w-nav-link navlinks" href="#work">work</a><a class="w-nav-link navlinks" href="#contact">contact</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu hamburger"></div>
</div>
</div>
</div>
</div>
What is causing this to happen?
You can get started with
preserveAspectRatio="xMinYMin meet" in your svg header
but I cant verify this without your svg on the fiddle
Your css
img {
display: block;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.w-nav-brand {
display: inline-block;
position: relative;
width: 50%;
padding-bottom: 60%;
}
The 60% needs tuning depending on size and width.
I've used this guide a lot, to good effect, but more with the object tag than img.
Try to trim the amount of css included in your fiddle, you'll get more interest!
I'm not sure what the issue here is, but its frustrating the hell out of me. I have a header div, for the logo and links, a wrapper div for the main section, and then a footer. width is set to 100% for all, but for some reason there is an overflow of white space spilling over on the right side and on the bottom. And it does this funky thing where if I move my mouse to the white space below the footer the contact link in my header is selected!
Theirs a fair bit of html and css so I decided to just link you guys to a jfiddle, it will be easier to just show you the problem in action. notice how you can scroll to the right and there is white space, even though the wrapper has background color set to grey, header has background set to white, and footer has background set to grey. all have 100% widths as well.
There is even white space coming in below the footer for some reason.
I hope all this makes sense and thanks for your help. I'm sure its something silly and obvious but I'm still kind of new to this!
http://jsfiddle.net/46andtool/Q2d4K/2/
heres the main div css
/*body element*/
body {font-size: 100%; line-height: 1; max-width: 100%; font-family: 'Source Sans Pro', sans-serif; }
/*contains #main and #footer*/
#wrapper { width:100%; background-color:grey; border: none;}
#main { width:100%; margin: 0 auto; border: none;}/*main body of website, wrapped inside of the wrapper div*/
/*div that contains the banner and navigation*/
.header {width: 100%; margin: 0 auto; background-color: #FFFFFF; padding-bottom: 10px; margin-bottom: 10px;}
/*Logo*/
#banner {float: left; max-width: 100%; margin: 0; padding: 0;}
/*navigation*/
#w { max-width: 100%; background-color: #FFFFFF; margin: 0; padding: 0; }
and the html:
<body>
<div class="header">
<img id="banner" src="img/******.png" alt="*******">
<div id="w">
<nav>
<ul id="ddmenu">
<li>About
<ul>
<li>Our Mission</li>
<li>The Staff</li>
<li>History</li>
</ul>
</li>
<li>Services
<ul>
<li>*****</li>
<li>******</li>
<li>******</li>
</ul>
</li>
<li>Links
<ul>
<li>China</li>
<li>Japan</li>
<li>Canada</li>
<li>Australia</li>
<li>South America</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div id="wrapper">
<div id="main">
<div id="innermain">
<h1>Latest News and Events</h1>
<h2>Welcome to !</h2>
<p>gsfdgdfgsdfgsdfg
</p>
<div id="linebreak"></div>
<p>gfdhgdfhfgh</p>
<br>
<p>hgdhfghgfh</p>
<br>
<p>gdhfgdhfghfgh</p>
<br>
</div>
<div id="rightside">
<h1>Where To Find Us</h1>
<div id="buildingpic"></div>
<div id="map_canvas"></div>
<p id="location">sadfasdfsadsdf<br> asdfsdfa<br> asdfdsfds<br> 555-3423</p>
</div>
</div>
</div>
<div id="footer">
Site design by <a class ="links" href="example#yahoo.com">fsgfdg</a></a> © <?php echo date('Y');?> All Rights Reserved
</div>
</body>
There are a couple things causing issues here.
Your body automatically comes with a margin, so it's going to overflow if you don't specifically set the margin:0px;
Your #footer had a width:100%; but it also had padding:10px. Those are combined, so you had width:100% + 10px of padding. Try to do something like what I provided, which is width:94%; and padding:10px 3%; so your width becomes 94% + 3% + 3% = 100%
Lastly, your #buildingpic element had width:300px which in this case was wider than the container it was in. You would be better off making it width:100% and height:auto; to automatically constraint to the proportions of it's container. In this case I set the max-width:100%;
http://jsfiddle.net/Q2d4K/4/
Also, you're going to have a hell of a time if you always use IDs. Try to use classes for elements so you can re-use them if need be, or at least not have issues with duplication or priority of selection.
I dont really understand how is possible that a
<div style="clear:both"></div>
doesn't work in Chrome. I have this layout:
<div id="header">...</div>
<div id="content">
<div id="col1">...</div> <!-- float left -->
<div id="col2">...</div> <!-- float left -->
<div id="col3">...</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>
So, I've used the clear:both before the footer and/or after the col3.
It does not work either in IE7 but, in this moment I dont really care.
Can anyone help me please?
I Add more informations:
#content {
padding-top: 19px;
display: block;
}
#col1,
#col3 {
width: 21%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
#col2 {
width: 58%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow...
Hope i ve been clear in the explanation..
However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
It actually works. You are just not using it properly.
If you use clear:both the following element will be effected only. So for instance,
floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left
Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.
Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".
http://jsfiddle.net/6VjSL/
clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/
Can you post a link to your site, or your full actual code?
CSS:
div {
border: 1px solid black;
}
.floaty {
height: 50px;
width: 50px;
float: left;
background: green;
}
.cleary {
height: 100px;
width: 200px;
clear: both;
background: cyan;
}
HTML
<html>
<head>
</head>
<body>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="cleary">Cleary</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
</body>
</html>
use clear:none; in the css property. It will work in chrome
Is better for semantic to use a class for this things. The correct way to go is:
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div id="col1">...</div> <--- float left
<div id="col2">...</div> <--- float left
<div id="col3">...</div> <--- float left
<div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>
CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.
Then it does not work anywhere ? :o)
You are probably applying the float:left to the clear:both divs too...
this works in all browsers:
http://jsfiddle.net/kKwkd/
HTML
<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
<div id="col1">bbb</div> <!-- float left -->
<div id="col2">ccc</div> <!-- float left -->
<div id="col3">ddd</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>
CSS
#header, #footer{
border: 1px dashed blue;
}
#col1,#col2,#col3{
float: left;
border: 1px solid red;
padding: 50px;
margin: 10px;
}
the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied