I ran into this very strange "bug" with IE7, I have many div.column floated left, no width specified. The strange thing is that in IE7 the hr element width seems to take up 100% width of the container of these columns. And also the css rules for hr do not seem to be applied nicely, the background img looks very weird, border doesnt seem to be removed:
hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}
<div class="column last">
<div class="title">Useful info</div>
<hr class="style3" />
<ul class="links line_height3">
<li>
sample link
</li>
</ul>
</div>
tw16 suggested http://borgar.net/s/2007/01/style-hr-elements/ which is a very cool technique, however for some reason I could not make it work for my particular case, perhaps I missed something.
Anyhow, I opted to use a div instead, but to make it behave similar to hr I wrap this div around a display:none hr:
css:
.hr hr {
display:none
}
html:
<div class="hr"><hr /></div>
However, if your div.hr is inside a floated container (which, in my case, is also in another floated container), then you may have to assign a fixed width for it (only for IE7). I use modernizr plugin so I did something like this:
.ie7 .hr {width:100px}
With this method, you can:
Style the "hr" with background image etc easily, which should work cross browsers
Still keep the hr element where you want it so text readers and such can see it
Related
I have a relatively small problem here, it doesnt appear in Chrome though.
I have 2 divs at 50% width of their container, one is floated to the left, the other floated to the right. One contains some text, and the other contains nothing but an image which has a max-width: 100% applied to it by default. But still, the image is overflowing to the left outside of the divs boundaries. How to fix?
http://jsfiddle.net/Pv5Cb/ - I am not sure if this will give you an idea about what is happening but still.
P.S. I am using some snippets from animate.css, but I doubt that this is the problem.
HTML:
<div class="content-project-left">
<h1>heading one</h1>
<p>paragraph</p>
</div>
<div class="content-project-right">
<div>
<a>
<img src="img/img.jpg" alt=""/>
</a>
</div>
</div>
Fixed it myself.
So it turned out that besides the two 50% sides that are floated to the left and right respectfully, I gave the image within the floated right div a float: right...
float: *; removes an element from its natural document flow.
Removed it and everything is back to normal now.
I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div class="pictures">
<ul>
<li>
<img src="img1.jpg" />
</li>
<li>
<img src="img2.jpg" />
</li>
<li>
<img src="img3.jpg" />
</li>
</ul>
</div>
I'm building a jQuery IMG slider and the basic code breakdown is what you see above. I'm having a bunch of different issues, but one, in particular, is kind of baffling. There seems to be a partial pixel space (1.5px, I believe) between each photo... not sure if it's a margin, padding, a border or something else. I have to animate the photos 331.5px up or down in order for them sit properly inside the container div. My general reset.css doesn't work. I have border, margin, margin-width and padding all set to 0 by default.
This is weird. Any ideas why it's happening? Or how I can eliminate it?
Link to actual page: http://www.ficreates.com/_SiteDemos/PBL/projects.html
Couple of things going on here.
First thing is that body {line-height: 1;} is inherited by your ul. Get rid of that or override it such as ul {lineheight: 0;} and the black spacing is gone.
Doing this does not align your animation though so you are going to have to fix your script.
One thing I noticed is that you are animating the position of the img tag instead of the container element such as the ul. Curious why you are doing it this way. Usually one would just do the += or -= on the container element. You can set the ul to display: block; if needed.
Hope this helps. Let me know if you have further questions. Perhaps later I can get a full working example.
I have this page: http://jsfiddle.net/minitech/yU3aj/show/
If you look in the source, the CSS defines that the <header> should have side padding of 135px on each side, and the content should have 135px margin on each side. Why does the content end up having double that in spacing?
It doesn't. You're floating elements in the <header> and not clearing them.
Add clear: both; to your styles for the content div and it will move below the header and to the left.
It looks fine on my screen (Firefox 5.0)
Though I've read that some old IE versions have a problem called double margin
Also make sure to put a clearfix div after those two child elements in <header>:
<header>
<div id="notifications" class="left">notifications</div>
<div class="right">
<span class="dropdown">▾</span> username
</div>
<div style="clear: both;"></div>
</header>
EDIT: after checking out your screenshot it's obvious that you're missing that clearing div and the content below "floats after" your notifications box. Usually it is considered to be good practice to put a clearing element at the end of the floated elements, this way forcing the container to expand and "cover" all the contained elements.
I'm creating a site where I've encountered a huge IE lag when hovering over the menus.
I'm using Cufon in combination and it seems like it's causing a huge lag when I apply height, width, margins or paddings to the li:hover element.
So, I need to figure out a smart way of doing this otherwise.
The site is here, http://w3box.com/mat
You can clearly see the menu I guess.
So, what I want is to push the entire menu downwards so it's like 3 or 4 pixels above the bottom of the height line. So it matches about the same vertical position as the logo font to the left.
Then, I want the hover effect to be larger in height. Hard to explain, but when hovering over a menu item, imagine a box where the text is positioned at the very bottom of the box. Like this;
http://img710.imageshack.us/img710/2791/menuheader.jpg
Now, you may notice the arrow looking thingy sticking at the bottom. I don't really need that, but if you have any idea on how to do it, I'd appreciate the help! ;)
I have not tried, but I think this may be an option.
You have everything with in one div, why dont you try to put div with in divs?
this is your current code for header.
<div id="header">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li>
<li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
You can try something like this, so you have more control over the different objects.
<div id="header" style="float:left;vertical-align:bottom">
<div id="imgChef">
<img class="LogoChef" src="img/LogoKokk2.png" alt="Logo"/>
</div>
<div id="imgMat" style="float:left;vertical-align:bottom">
<img class="LogoMatkalender" src="img/MatkalenderLogo.png" alt="Logo"/>
</div
<div id="menu" style="float:right;vertical-align:bottom">
<ul class="menuwrapper">
<li><h4>Logg ut</h4></li> <li><h4>Kontakt</h4></li>
<li><h4>Kontrollpanel</h4></li>
<li><h4>Oppskrifter</h4></li>
<li><h4>Hjem</h4></li>
</ul>
</div>
</div>
I am not sure that may be the right combination, but I think with the three divs inside the div you will gain more control over the elements inside the header div.
Omit the h4 in the menu since i think it is not needed. Than set display:block on <a> and use line-height and padding-left , padding-right to make the anchor expand the right size. Also notice that li:hover is not supported in IE6/7 without some tweaks. To position the menu on same level as logo just set a margin-top on ul element.
There're too many rules for me, too many useless rules.
Don't have the time to correct all and test it on FF/IE, but this works ofr example :
.menuwrapper li {
float:right;
list-style: none;
padding: 30px 23px 3px 23px;
position: relative;
top: 7px;
}
What about vertical-align?