lately i've been slamming my head against my desk to solve this Problem. Didn't work out. I know it can be solved by editing the contents with some clearing elements. Sadly there is some javascript sorting beeing used and the Sourcode is being generated by CMS Components so that would be my last shot.
I'm having a few boxes beeing floated alwayes 2 in a row. The boxes have a diffrent height but equal width and are all placed in a container with static width. The link shows the source i need to reproduce the Problem. My Boxes are beeing floated left. I tried to fix this with clear: left on odd and clear: right on even elements. But that only works in ff/ie8/chrome Browsers, not ie7.
Example: http://www.i3rutus.de/ie7divfloatexample/
Anyone knows a possibility to fix this Problem by just editing the CSS not the actual XHTML? Problem appears in IE7. IE8, Chrome and FF work fine.
Any Ideas?
Thanks in advance
Here's the deal. You only need to float one of each of the pairs of boxes. Here's the amended css rules:
.even {
float: left;
clear: left;
margin-top: 0
}
.odd {
}
Demo
(Incidentally, your use of odd and even had me chasing my tail for a while ;) )
Just remove
.even {
clear: left;
}
.odd {
clear: right;
}
and it works as intented.
If you are able to include a js in the header then maybe try to use http://code.google.com/p/ie7-js/?
I played with it but given float:right screws it up, it's probably a little more complex than experimenting with float values.
-- update --
I seemed to be able to get it work in ie7 by:
remove float:left on .clear,
added float:left;margin-top:0px to .even
Related
Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
I'm learning HTML/CSS and I encountered a problem. I'm currently working on goodwill.heyscout.com as a side project.
From learnlayout.org, I learned that the best way to structure a layout with a div is to give the inner a position:absolute, and the outer a position:relative. This works.
However, this throws the alignment off as soon as I add the position:absolute (I want the profile cards side-by-side). Without the position absolute, everything gets shifted if I want to alter the layout of the profile card. As you can see on the bottom two profile cards, they align as those aren't altered.
Can anybody point me in the right direction?
I also know that my code is pretty messy and that's what I really need to get better at... any other suggestions on how I can improve my code would also be useful.
You can throw a float: left onto your outer class and that should get them sitting side by side again. You may want to read up on using floats at some point as they can be very powerful (if a little hard to get your head around at first)
.outer {
width: 49%;
display: inline-block;
float: left;
}
BTW, I notice you using id="outer" multiple times. You should change this to class="outer" as an ID should be unique, whereas a class can be used multiple times. You'll see in the above CSS that I've used .outer as I'm targeting by a class name (rather than #outer which targets by ID)
Interesting problem you have found. I can't tell you exactly why it is behaving this way but it appears to be related to having text directly in the #box div or not. If you remove the "test" from the second one it aligns as you would expect. Likewise, if you put the exact same content in the second div as the first, they align.
For improvements I would start by never re-using an id (like you are doing with #outer and #box for example, these should be classes). The id attribute needs to be unique, no two DOM-elements should have the same id.
I would also suggest using a ul for #businesscards sice it represents a list of cards. This would make #outer an li. You did this in #navlist so you know what I mean.
Give just vertical-align: top; to your #outer div. The problem will be solved.
As this happens only to child elements, give something like this to solve the issue:
div > * { /* or just '*' */
vertical-align: top; /* or middle */
}
I have uploaded the following page to make easier for you to help me:
http://www.rebuslondon.com/GEBROCHUREcopy.html
Do not use Internet Explorer as I have not optimised the page for that.
As you can see, there are 4 images, being three orange and one yellow.
While the orange ones are simply embedded into the parent element, the yellow one is floated so that it will stick to the parent's right edge when the browser window is enlarged.
This works all right but when the window is narrowed (for example 1024*768), this creates a gap below the floated image.
Is there a way to make that gap disappear? I guess the best way for you to understand what the issue is is trying resizing the browser window. You'll notice that the narrower the window the bigger the gap will become.
Thanks much!
The problem is the fact that you have added clear:both to the li immediately following li.right. If you remove this rule, it displays fine.
#portfolio #container > ul.projFlow li.floated + li {
clear: both;
}
Simply remove clear both from your contents.css line 90
#portfolio #container > ul.projFlow li.floated + li {
clear: both;
}
Just remove that completely and it will be fine.
i have a Problem with my Wordpress Design, specialy with Dropdownmenu.
http://fincha.com/wordpress/
Check this, in the main menu "Versicherungen" you will see, i tryed allready all combinations with z-index... without results. :(
if some one have a nice idea for this menu, just tell :)
thx
I don't understand the reason for this myself (though I didn't research it; maybe a more experienced user can tell me), but z-index properties are only respected when the element is not positioned statically. Your problem is fixed by adding
#mainmenu {
position: relative;
}
so by including position: relative; for #mainmenu (your declaration starts on line 46 of style.css).
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.