I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;
Related
I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
I'm experiencing a weird issue in the latest version of Chrome (25.0.1364.97 m). I have a set of divs inside a floated, cleared container, all floated left with the same width.
In Firefox, IE, and older versions of Chrome all the boxes sit side by side as they are supposed to but in the latest version of Chrome the first div is above the others like so:
It only seems to happen when the window is maximised and on the first load, if I refresh the page it sorts itself out, but if i do a hard refresh with Ctrl + F5 it happens again
The HTML:
<div id="top">
<h1>Words</h1>
</div>
<div id="wrapper">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
CSS:
#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}
I've made a fiddle here: http://jsfiddle.net/GZHWR/3/
Is this a bug in the latest Chrome?
EDIT: I know this can be solved by applying padding to the #wrapper element instead of margin-top but we manage around 140 sites so it's not practical to go and change the CSS on every one
EDIT 2: I think I need to clarify my question. I am not asking how to fix the issue. I already know that. I want to know why this behaviour is occuring? Why is the rendering engine rendering the markup/css like this? Is it correct behaviour?
It seems to be a bug. The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.
According to the W3C specs regarding the clear property:
This property indicates which sides of an element's box(es) may not be
adjacent to an earlier floating box. The 'clear' property does not
consider floats inside the element itself or in other block formatting
contexts.
So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.
Update: From the link in the comments, kjtocool mentioned on 30-03-2013:
It appears that this issue has been corrected in version 26.0.1410.43
Why don't you use
display: inline-block;
instead of float: left for .box?
Try :
#wrapper {
display:inline;
}
.box{
vertical-align:top;
}
I had the same issue with the "Like" toolbar and after this code, it work.
Try this:
css:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
html:
<div id="wrapper" class="clearfix">
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
<div class="box">Words</div>
</div>
Remove
clear:both;
from #wrapper
remove clear:both from #wrapper yes it works..........
http://jsfiddle.net/GZHWR/20/
Remove clear:both from #wrapper and if you still face a problem apply clear:both after last div
Remove clear:both;float:left; form #wrapper
clear:both is require when you want div nex raw.
Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com
Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.
Help? Some kind of syntax error I'm sure...
HTML:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
</div>
CSS:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite:hover {
margin-top:-61px;
}
I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.
As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:
You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<a class="sprite" href="#">
<img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
</a>
</div>
with this css:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite img {
margin-top: 0;
}
.sprite:hover img {
margin-top: -61px;
}
I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.
I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.
In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.
Thus when you change the margin on your image it will move within the frame of your outer div.
Additionally I had to add a tag name to the hover declaration.
<html>
<head>
<style>
#work{
position:relative;
overflow:hidden;
width:140px;
height:61px;
}
div.sprite {
margin-top:0;
}
div.sprite:hover {
margin-top:-61px;
}
/* instead of an image */
.sprite div{
height:61px;
}
.red {background:red}
.blue {background:blue}
</style>
</head>
<body>
<div id="work">
<div class="sprite">
<div class="red">a</div>
<div class="blue">b</div>
</div>
</div>
</body>
I'm creating a calendar and need to replicate the behaviour I would get with
overflow-x:visible;
overflow-y:hidden;
for browsers that don't support these css attributes. Is there some kind of workaround I can do? I don't just want to compromise and add in overflow:hidden for those browsers, since the client really wants this feature. Does anyone have any good ideas?
Many thanks.
Here is someone who asks roughly the same question (overflow-x visible and -y hidden).
http://forums.devnetwork.net/viewtopic.php?f=68&t=116457
Someone named Weirdan says I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent, and shows an example where it is not clear (says Weirdan) whether the area to the southeast should be hidden or shown.
S/he also says that the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden, and shows this example (I hope it's OK that I copy it to here?).
<style type="text/css">
#outer-wrapper {
overflow-y:hidden;
}
#outer {
width:100px;
height:100px;
background:red;
border:solid red 1px;
overflow:visible;
}
#inner {
width:200px;
height:200px;
background:green;
}
</style>
<div id="outer-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext