I am having an issue with my divs in Internet Explorer. I have a three column layout and it displays correctly in all browsers (chrome, firefox, safari) except for Internet Explorer. In IE, the middle div displays at the bottom of the page instead of between the sidebars.
I've been trying for days to figure out what the issue is. I'm sure it's something to do with my CSS, but I'm not sure.
Any help would be appreciated!
My website is: http://www.onedirectionconnection.com
And here's the CSS:
div#container {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 1125px;
text-align: left;
}
div#header {
clear: both;
height: 500px;
margin-top: 0px;
padding: 0px;
border: 0px
}
div#navi {
text-align: center;
background: #FFFFFF;
clear: both;
height: 60px
margin-left: 13px;
margin-right: 13px;
margin-bottom: 10px;
padding-left: 39px;
border-bottom: 3px solid #FF0000;
border-top: 3px solid #FF0000;
}
div#left {
float: left;
width: 320px;
}
div#right {
float: right;
width: 320px;
}
div#middle {
padding: 0px 325px 5px 325px;
margin: 0px;
}
I just included the parts I think are relevant to the problem, but anyone can feel free to serf the code on my website if necessary!
Increase width of container or decrease some margins.
#middle
{
padding: 0px 0px 5px 0px;
margin: 0px;
overflow: hidden;
width: 485px;
float: left;
}
You need to work on the positioning of the DIVs. The left div is ok. Add middle div after left div and then right div.
Add float: left; width: 400px; margin: 0; to middle. And adjust the widths of middle DIVs child elements.
Related
I have a DIV which is displayed on top of images of items that are for sale on a portfolio website. This works fine in standard browsers, but when it comes to older browsers (the dreaded IE) for some reason the DIV is pushed to the right.
Any help would be appreciated
This is the code for the for-sale banner;
.post .forsale {
width: 70px;
height: 75px;
position:absolute;
margin-top: -10px;
margin-left: -8px;
display: none;
background-image: url(images/fs.png);
background-repeat:no-repeat;
}
This is the code for .post
.post {
text-align: center;
overflow: hidden;
width: 200px;
height: 380px;
border: 1px solid #ccc;
-webkit-border-radius: 10px;
border-radius: 10px;
display: inline-block;
margin: 0 10px 62px;
background: #e0e0e0;
vertical-align: top;
*display: inline;
zoom: 1;
}
I am following this tutorial link but do not know how to put the footer on the bottom of the page so when the user open the page the footer is on the very bottom of page regardless of size of the monitor.
So that when they change the size of window or use a bigger monitor footer should be at the end of page.
The important part is that I do not have much text in my content section so the scroll bar is expected to be invisible in any size of monitor.(those that are not very tiny)
*Please also note that I have looked at the previous question but could not find a correct answer.
* If you know of any other tutorial I would appreciate your suggestion. (I need float layout)
Layout
container
{
header
content
{
leftnav | rightnav
}
footer
}
Css
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
In the tutorial the footer is in a container div.
If you remove from the container width:90% the example will be rendered across the whole width of the screen.
Use the sticky wrapper jQuery plugin, or use position: fixed with bottom: 5% and left: 0 and margin-left values in -ve.
<footer style="background-color: crimson; color:springgreen; font-family: serif; text-align: center; font-size: 15px; position:absolute; width: 99.82%;margin-left: -6px; margin-right: -6px;"><h1>THIS IS MY FOOTER</h1></footer>
Browser: Google Chrome
System Screem: 15.6"
I have experienced that the appearance of our divs, headers, footers & navs varies from screen to screen and may be browser to browser.
try this :
#footer{
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
}
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.
I'm working on a web site and im having trouble with the left navigation. As you can see here http://animactions.ca/test/Desktop/
the left navigation menu does not go to the bottom, it stops after the content. I would need it to stop at the bottom of the page.
Here is the css:
/* CSS layout */
body {
margin: 0;
padding: 0;
}
#masthead {
}
#top_nav {
width: 700px;
background-color: #DDDDDD;
margin-right: auto;
margin-left: auto;
}
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
}
#left_col {
width: 95px;
float: left;
background-color: #B79F63;
border-right: 5px solid #976F43;
}
#page_content {
width: 600px;
float: right;
background-color: #D2C388;
}
#footer {
clear: both;
width: 700px;
text-align: center;
background-color: #E0E0E0;
margin-right: auto;
margin-left: auto;
}
Thanks
One way around this is to create a background image for the div containing the navigation and the main content (in your code it's "container") that mimicks the background colors and separation lines you want for the columns. It can often be as small as 1px high but should be the width of the container, and will repeat down the page.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://www.cssnewbie.com/equal-height-columns-with-jquery/