I am experiencing issues with floating divs in IE9. The second div (after having added borders) seems like it is split into two, though it is one div with a header tag and an unordered list. The header tag displays correctly, while the list is pushed below the first div and the other divs then float next to the list. If I removed the div containing the list, the same thing happens with the next div; header displays correct, but the images are pushed below the first div. Have a look at the site: http://www.greenhomesofmaine.com/ scroll down to the footer. IE9 is the only browser causing this mal-alignment of divs.
CSS:
#footertopbg {
display: block;
background: #333333;
width: 980px;
margin: 10px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 5px solid #222222;
}
#footertop {
float: left;
display: block;
line-height: 16px;
background: #333333;
width: 980px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footertop h4 {
color: #FFFFFF;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -0.2px;
margin: 0px 0px 10px 0px;
padding: 20px 0px 5px 0px;
text-decoration: none;
border-bottom: none;
}
#footertop li {
text-decoration: none;
list-style-type: none;
}
#footertop li a, #footertop li a:link, #footertop li a:visited {
color: #CCCCCC;
font-weight: normal;
text-decoration: none;
}
#footertop ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 10px 0px;
}
#footertop ul ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#footertop ul li {
list-style-type: none;
margin: 0px 0px 8px 0px;
padding: 0px;
}
#footertop ul li {
display: inline;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#footertop ul li a {
background: none;
display: block;
padding: 5px 7px 3px 7px;
margin: 0px 0px 8px 0px;
border-left: 5px solid #333333;
}
#footertop ul li a:hover {
background: none;
color: #FFFFFF;
display: block;
padding: 5px 7px 3px 7px;
border-left: 5px solid #0099CC;
}
#footertop .textwidget {
color: #CCCCCC;
line-height: 18px;
}
.footertopleft {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 15px;
padding: 0px 0px 0px 0px;
}
.footertopmidleft {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}
.footertopmid {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}
.footertopmidright {
width: 170px;
float: left;
display: inline;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}
.footertopright {
width: 170px;
float: right;
display: inline;
margin: 0px 15px 0px 10px;
padding: 0px 0px 0px 0px;
}
I have never encountered an issue like this and any help would be appreciated.
Try using IE9 in compatibility mode. For whatever reason there is that option and many times that's the only way to fix stupid issues that are only pertinent to IE9.
Related
See: fiddle
When the window is long enough, both divs are in the same line, but when it's smaller, the second div(.footers) moves to a new line. I wan't them to be in the same line all the time.
Css from the left div:
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
Css from the right div:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
}
What is causing this problem?
If you only want to give the left div (.footer_links) a fixed height, instead of floating the div on the right (.footers), give it overflow:hidden. This will cause it to fill the remaining width of the page:
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
JSFiddle
.footer .footer_links {
float: left;
width: 20%; // In percent
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer .footers {
text-align: left;
float: left;
width:70%; // In percent
padding: 0px 20px 0px 20px;
}
You can add to a .footers div a white-space , and fixed height:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
white-space: nowrap;
height: 20px;
}
try this give max-width:
DEMO
CSS
footer {
background: #f2f2f2 !important;
margin-top: 20px;
padding: 10px 0px 10px 0px;
}
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer a {
font-size: 14px;
color: #898989 !important;
}
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
.footer .footers p {
font-size: 14px;
color: #898989;
line-height: 20px;
}
.clear{
clear: both;
}
in DEMO2 you have write max-width: then its working
DEMO2
CSS
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
max-width:300px;
}
I'm having problem with this style, the content body wraps around the menu bar, I've tried removing the float but nothing happens.
.menu {
float: left;
padding: 0;
width: 100%;
margin: 0 0 1em 0;
}
.menu ul {
width: 1100px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.menu li {
float: left;
}
.menu li a {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
padding: 2px 10px;
text-decoration: none;
}
.menu a:hover {
color: #FFFFFF;
border-radius: 5px;
border-style: solid;
border-color: #666666;
border-left: 1px;
border-right: 1px;
box-shadow: #333 3px 3px 4px;
}
.content {
width: 1100px;
margin: 0 auto;
}
the content writes next the last link.
You don't have any clear in your CSS. Make sure that the first element after the floating div gets cleared.
I am using the theme twenty twelve for wordpress http://wordpress.org/extend/themes/twentytwelve and have changed the menu so that it looks good for the desktop. In the mobile version, the button for the menu shows up but when you click it appears my regular menu. I would like to style down the mobile menu without my normal menu is affected but can not find where to do it. My site is not online, so I can not give a link to my site
twenty twelve demo http://twentytwelvedemo.wordpress.com/
This is my destop menu that looks ok.
This is the mobile menu that I want to style without affect the desktop menu
Have changed the following css to style my desktop menu
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 2px solid #f68a1f;
border-top: none;
margin: 0 0 2px 0;
padding: 0px;
padding-top: 50px;
width: 550px;
}
.main-navigation ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li a,
.main-navigation li {
list-style: none;
float: left;
width: 90px;
margin:0px;
}
.main-navigation li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 1rem 0 0;
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a {
color: #292A2B;
display: block;
padding: 5px 5px;
text-align:center;
text-decoration: none;
font-weight: normal;
font-size: 14px;
line-height: 30px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation li ul li a:hover {
color: #ffffff;
background-color: #f68a1f;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #ffffff;
background-color: #f68a1f;
}
The entire css file from theme http://pastebin.com/SFaT4BCn
Do you use media queries? Try to use media queries to set styles for specific device resolutions.
Found /* =Media queries /* Minimum width of 600 pixels. */ in CSS and the theme use mobile first. Just moved my code to that section.
I want to the Li Element of the Ul of my menu are in the Center, I tried a lot of methods but it is not going on. Take a look on my css:
#menu {
float: left;
width: 767px;
height: 38px;
margin: 11px 0 0 14px;
background: url(images/menubg.gif) repeat-x;
-webkit-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border: 1px solid #efeff1;
}
#menu ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
height: 40px;
}
#menu ul li {
float: left;
color: #767676;
height: 18px;
padding: 11px 0px 11px 0px;
display: inline;
}
#menu ul li a {
font-family: Arial, Helvetica, sans-serif;
color: inherit;
font-size: 12px;
text-decoration: none;
font-weight: bold;
display: block;
padding: 0px 23px 2px 23px;
border-left: 1px solid #e0e0e2;
}
I tried display: inline, text-aling: center, but it doesnt get right.
Thanks a lot in Advance.
I removed the float and added inline-block instead:
http://jsfiddle.net/dtTdg/1/
#menu ul li {
display: inline-block;
my code is as follows:
#under {
width: 100%;
height: 50px;
background-color: #D4D4D4;
border: none;
-webkit-box-shadow: inset 0px 0px 4px 0px #000000;
-moz-box-shadow: inset 0px 0px 4px 0px #000000;
box-shadow: inset 0px 0px 4px 0px #000000;
overflow-x: scroll;
white-space: nowrap;
}
#under ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#under ul li {
min-width: 100px;
height: 40px;
margin-top: 10px;
margin-left: 10px;
float: left;
background-color: #999;
display: block;
}
Basically, I have the #under div with li elements inside of it. I want them to 'overflow' the container so that it can scroll on the X-axis, but I cannot for the life of me figure out how to do this!
It will make the li elements display under each other.
Any help is appreciated, thanks!
EDIT: Live Example https://babblebox.me/mobile/
they are still under because it's floating, and because width:100% it's resizing to available size of screen not div.
Basically i think you should add to ul some width
i mean:
#under ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 8000px;
}
You can always scroll the immediate children of an element. You can either make a really wide <ul> as Kokers said or, as I would do it, make apply the scrolling styling on the <ul>.
#under {
width: 100%;
height: 50px;
background-color: #D4D4D4;
border: none;
-webkit-box-shadow: inset 0px 0px 4px 0px #000000;
-moz-box-shadow: inset 0px 0px 4px 0px #000000;
box-shadow: inset 0px 0px 4px 0px #000000;
}
#under ul {
list-style: none;
margin: 0px;
padding: 0px;
overflow-x: scroll;
white-space: nowrap;
}
#under ul li {
min-width: 100px;
height: 40px;
margin-top: 10px;
margin-left: 10px;
background-color: #999;
display: inline-block;
}
*Note: I changed in float: left; display: block to display: inline-block in #under ul li
here you can see it in action: http://jsfiddle.net/rvt5N/
you have make width of #under to less than it is,
than your overflow works and give width in pixel...
try overflow: auto; in #under ?