I have add a footer background image.It's look perfect on my PC. But it show up not correct on iPad browser. I'm try to upload image to show you guy but i'm very new on stackoverflow so i can't upload.If anyone know how to show you guy an image. Please let me know i will upload it. Please have a look at the Black part bottom right. Anyone please help me to fix this problem
Thank you
I add this line to my css.
.footer{ border-top: 4px solid #00b0bd; }
.footer a{ color: #000000;}
.footer-container { width:100%; text-align: left; background: url("../images/footer/footer_damask.gif") repeat scroll 0 0 #333333;}
.footer { margin: 0 auto 15px; width: 960px; }
.aditional-footer { margin:0 auto 0; padding: 30px 0 30px; width: 960px; background-image:none !important;}
.footer .links li { text-transform: none; }
.footer-container a { color:#666669; font-size: 11px; width: 960px; }
.footer-container .footer-right { width: 250px; }
.footer .f-right { width:429px; text-align: right; padding-right:20px; }
this is my full CSS.
/* Footer ================================================================================ */
.footer-social-container { width:100%; background: none repeat scroll 0 0 #404040; border-top: 0 solid #00aebb;}
.footer-social { width:960px; padding: 5px 0; margin:0 auto; }
.footer-social .phone { color:#111; float:right; font-size:16px; }
.footer-social .follow_us { display: inline-block; font-size: 16px; margin: 0; float: left; color:#ffffff; }
.footer-social .twitter,
.footer-social .rss,
.footer-social .facebook { margin-left: 5px; text-indent: -9999px; display: inline-block; float: left; background-repeat: no-repeat; background-position: top center; height:24px; width:30px; }
.footer-social .twitter:hover,
.footer-social .rss:hover,
.footer-social .facebook:hover { background-position: bottom center; }
.footer-social .twitter { background-image: url(../images/twitter.png); }
.footer-social .rss { background-image: url(../images/rss.png); }
.footer-social .facebook { background-image: url(../images/facebook.png); }
.footer-social .gift_img { float: left; border-left: 1px solid #00afbc; border-right: 1px solid #00afbc; padding: 0 50px; margin: 0 0 0 100px; }
.footer{ border-top: 4px solid #00b0bd; }
.footer a{ color: #000000;}
.footer-container { width:100%; text-align: left; background: url("../images/footer/footer_damask.gif") repeat scroll 0 0 #333333;}
.footer { margin: 0 auto 15px; width: 960px; }
.aditional-footer { margin:0 auto 0; padding: 30px 0 30px; width: 960px; background-image:none !important;}
.footer .links li { text-transform: none; }
.footer-container a { color:#666669; font-size: 11px; width: 960px; }
.footer-container .footer-right { width: 250px; }
.footer .f-right { width:429px; text-align: right; padding-right:20px; }
.footer ul { display:inline; }
.footer li { display:inline; background:url(../images/bkg_pipe1.gif) 100% 50% no-repeat; padding:0 5px 0 0; margin:0 3px 0 0; }
.footer .links li.last { background:none !important; padding-right:0 !important; }
.footer .bugs { margin:0; color:#666; }
.footer .bugs a { font-weight:bold; color:#353535; }
.footer address { color:#666; }
.footer address a { color:#353535; }
.policy li { margin-left:2px; padding-left:10px ; line-height: 1.5; background: url(../images/footer_li.png) no-repeat left top;}
.policy li:hover { background: url(../images/footer_li.png) no-repeat left bottom;}
.footer-container .form-subscribe { }
.footer-container .form-subscribe label { padding-top:2px; font-weight:bold; color:#555; }
.footer-container .form-subscribe .input-box { border: 1px solid #EFEFEF; width: auto; float: left; height: 27px;}
.footer-container .form-subscribe button.button { float:left; width: 58px;}
.footer-container .form-subscribe button.button span { height: 22px; font: normal 11px/22px Tahoma, Verdana, Arial, sans-serif; }
.footer-container .form-subscribe input.input-text { width: 180px; border: 0px solid #d6d4d4; border-right:0; padding: 0; padding-left: 8px; float:left; height: 27px; line-height: 27px; }
.footer-container .form-subscribe input.input-text:focus { border: 1px solid #FF292C; border-right: 0; height: 25px; line-height: 15px }
.footer-container .form-subscribe input.input-text.validation-failed { background: none!important; border-right:0!important; }
.footer-container .form-subscribe .validation-advice { position: absolute; width: 171px; margin-top: 31px; background: white; padding:5px; }
.footer-container .footer-callout { display:block; margin:-10px 0 10px; position:relative; }
.footer-container .store-switcher { color:#555; text-align:right; }
.footer-container .store-switcher label { font-weight:bold; vertical-align:middle; }
.footer-container .store-switcher select { padding:0; vertical-align:middle; }
.footer-container .bottom-container { margin:0 0 8px; text-align:right; }
/* ======================================================================================= */
Not an iPad specific problem, rather a low horizontal resolution one. I've the same bug in Chrome when my window is narrow.
Why ?
Your .page is 960px wide, overflowing your body which is 100% (768px on iPad)
Your footer is 100% width, so the same width than your body, 768px.
Related
The project is located at here.
I am creating a website for a company which specializes in comics. Nothing to advanced just some lightboxes with slides in. This I have managed to do. The website uses Joomla 3.x and the Purity-iii template.
My issue is this. All the lightboxes want to appear on a new line rather than side by side. I checked the developers website as it is a paid module. They recommended inserting the following code to have the lightboxes appearing horizontally as opposed to vertically.
.artsexylightboxpreview {
display: inline-block !important;
}
Nothing happened. I inspected the element in chrome and the .css file in use is correct. I have edited line 107 also as inspection tells me this is the section of the .css which is controlling the box. Still nothing happens. I removed the margin as it conflicted with the display tag. The full .css file is below. Please let me know if you need anything else to help with solving this for me.
.artsexylightboxpreview {
display: inline-block !important;
}
#SLB-Wrapper {
margin:0.5em 0;
margin:auto;
font-family:Verdana;
text-align: left;
position: absolute;
display: none;
}
#SLB-Wrapper #SLB-Background{
position: absolute;
left:7px;
top:7px;
float:left;
}
#SLB-Wrapper #SLB-Top {
background:transparent no-repeat scroll 100% 0;
height:28px;
margin:0 0 0 18px;
}
#SLB-Wrapper #SLB-Top img {
float:right;
border:0px;
margin:6px 10px;
}
#SLB-Wrapper #SLB-Top div {
background:transparent no-repeat scroll 0 0;
font-size:0;
height:28px;
left:-18px;
line-height:0;
position:relative;
width:18px;
}
#SLB-Wrapper #SLB-Bottom {
background:transparent no-repeat scroll 0 43%;
height:20px;
margin:0 18px 0 0;
}
#SLB-Wrapper #SLB-Bottom #SLB-BottomRight {
background:transparent no-repeat scroll 100% 43%;
font-size:0;
height:20px;
right:-18px;
line-height:0;
position:relative;
width:100%;
float:right;
}
#SLB-Wrapper #SLB-Bottom.SLB-bbnav, #SLB-Wrapper #SLB-Bottom.SLB-bbnav #SLB-BottomRight{
height:52px;
}
#SLB-Wrapper #SLB-Bottom.SLB-bbnav {
background-position:0 100%;
}
#SLB-Wrapper #SLB-Bottom.SLB-bbnav #SLB-BottomRight{
background-position:100% 100%;
}
#SLB-Wrapper #SLB-Contenido {
border-left: 7px solid #000;
border-right: 7px solid #000;
}
#SLB-Wrapper #SLB-Bottom #SLB-Navegador{
font-size: 11px;
color: #fff;
height:30px;
border-left:0px;
border-right:0px;
padding:10px 0px;
margin:0;
line-height:11px;
float:left;
width:100%;
}
#SLB-Wrapper #SLB-Navegador img{
border:0px;
}
#SLB-Wrapper #SLB-Navegador strong{
display: block;
}
#SLB-Wrapper #SLB-Bottom #SLB-Navegador img.btLeft{
float: left;
margin: 0 10px 0 0;
}
#SLB-Wrapper #SLB-Bottom #SLB-Navegador img.btRight{
float: right;
margin: 0 0 0 10px;
position:relative;
right:17px;
}
.artsexylightbox {
border: 2px solid #EEEEEE;
display: inline-block !important;
}
.artsexylightbox_singleimage {
cursor:pointer;
border: 2px solid #EEEEEE;
display: inline-block !important;
}
.artsexylightbox_singletext {
cursor:pointer;
}
.artsexylightbox_container {
width: 100%;
}
.artsexylightboxlink {
margin-right: 10px;
}
.asl_next {
background: url(../images/next.png) no-repeat 50% 50%;
float: left;
width: 32px;
height: 32px;
cursor: pointer;
vertical-align: middle;
clear:right;
}
.asl_prev {
background:url(../images/previous.png) no-repeat 50% 50%;
float: left;
width: 32px;
height: 32px;
cursor: pointer;
vertical-align: middle;
clear:both;
}
.asl_carousel {
float: left;
}
.asl_carousel li {
background-image: none !important;
}
.asl_caption {
text-align:center;
}
.asl_image_caption {
//float:left;
display:inline-block;
}
.asl_folder {
margin: 5px;
float: left;
text-align: center !important;
}
.asl_folder div {
text-align: center !important;
}
.sexylightbox_print {
cursor: pointer;
}
The recommended change looks like it is being applied correctly but does not seem to make any difference.
Using a float may be more appropriate:
.artsexylightboxpreview {
float: left;
}
I have some pictures with links, and in IE, there is a blue border around them, I have tried everything I have found, this link as well. how to remove blue border around links in IE9?
For some reason I cannot get it to go away.
Thanks in advance for the help.
Its the div.logo one I am trying to fix
body {background-image:url('../images/space1.jpg');
background-repeat: no-repeat center center;
background-position: center;
background-size: cover;
width: 100%;
min-height: 100%;
}
body {color:white;}
a, a:visited {
color:#3399FF; text-decoration:none;}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
a border:none;
img
text-decoration: none;
border: 0px;
border-style:none;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: #3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color:#3399FF;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.glams {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen and (min-width: 768px) and (max-width: 770px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:140%;
}
div.header1 {
text-align:right;
font-size:100%;
}
div.logo{
margin-top:-40px;
}
div.logo
img {
height:100px;
width:200px;
}
#nav{
width:100%;
height:3%;
font-size: 100%;
font-weight: bold;
border-radius: 8px;
margin:0;
padding:0;
text-align: center;
margin-top:5%;
margin-left:-14%;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
display: inline-block;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
margin-top:15%;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:3%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:3%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
div.glams
img {
height:180px;
width: 300px;
}
#media only screen
and (min-device-height : 768px)
and (min-device-width : 1024px)
and (orientation : landscape) {
body { background: green; }
div.header{
text-align:right;
font-size:140%;
}
div.header1 {
text-align:right;
font-size:100%;
}
div.logo{
margin-top:-40px;
}
div.logo
img {
height:80px;
width:150px;
}
#nav{
width:100%;
height:3%;
font-size: 100%;
font-weight: bold;
border-radius: 8px;
margin:0;
padding:0;
text-align: center;
margin-top:5%;
margin-left:-14%;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
display: inline-block;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
margin-top:15%;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:3%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:3%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
div.glams
img {
height:180px;
width: 300px;
}
}
To make them go away use this:
a > img {
border: 0;
}
This means the image just inside the link should have no border. I had the same issue and its fixed! :) Try it.
a, div {
outline: none;
border: none;
}
outline means the blue border.
I am trying to specify css for ipad landscape and portrait mode, and for some reason, the landscape is not playing well. It looks like the landscape is just using the portrait mode. The website is http://darthvixcustomsabers.com/ascend.html and im using ipadpeek emulator to test it.
Here is my CSS, the media queries are in the middle about.
body {background-image:url('../images/space1.jpg');
background-repeat: no-repeat center center;
background-position: center;
background-size: cover;
width: 100%;
min-height: 100%;
}
body {color:white;}
a, a:visited {
color:#3399FF; text-decoration:none;}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: #3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color:#3399FF;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.glams {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen and (min-width: 768px) and (max-width: 770px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:140%;
}
div.header1 {
text-align:right;
font-size:100%;
}
div.logo{
margin-top:-40px;
}
div.logo
img {
height:100px;
width:200px;
}
#nav{
width:100%;
height:3%;
font-size: 100%;
font-weight: bold;
border-radius: 8px;
margin:0;
padding:0;
text-align: center;
margin-top:5%;
margin-left:-14%;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
display: inline-block;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
margin-top:15%;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:3%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:3%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
div.glams
img {
height:180px;
width: 300px;
}
#media only screen
and (min-device-height : 768px)
and (min-device-width : 1024px)
and (orientation : landscape) {
body { background: green; }
div.header{
text-align:right;
font-size:140%;
}
div.header1 {
text-align:right;
font-size:100%;
}
div.logo{
margin-top:-40px;
}
div.logo
img {
height:80px;
width:150px;
}
#nav{
width:100%;
height:3%;
font-size: 100%;
font-weight: bold;
border-radius: 8px;
margin:0;
padding:0;
text-align: center;
margin-top:5%;
margin-left:-14%;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
display: inline-block;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
margin-top:15%;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:3%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:3%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
div.glams
img {
height:180px;
width: 300px;
}
}
You can identify orientation by CSS media queries
/* portrait */
#media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
#media screen and (orientation:landscape) {
/* landscape-specific styles */
}
I am trying to scale a menu bar according to screen size. I've tried float, #media etc. but it hasn't worked properly. Full screen on my 13' looks great. However, as soon as I scale it down, the menu bar shifts to the right, but the page elements are fine. Menu is at the bottom #navsite.
CSS
* {
margin:0;
padding:0;
}
html{
min-width:770px;
}
body{
background:white url(candy/background.png) 0 0 repeat;
text-align:center;
}
/*=====[ Set up container divs and add background tiles ]=====*/
#pageheadContainer,
#contentContainer,
#footContainer{
width:100%;
}
#pageheadContainer{
background:transparent url(candy/pageheadBackground.png) 0 100% repeat-x;
}
#contentContainer{
background:#F7F7F7 url(candy/contentBackground2.png) 50% 100% repeat-y;
float:left;
}
#footContainer{
background:transparent url(candy/footBackground.png) 0 0 repeat-x;
clear:both;
}
#pagehead,
#content,
#foot{
width:770px;
margin:0 auto;
position:relative;
text-align:left;
}
#pagehead{
height:130px;
}
#foot{
height:150px;
}
#pagehead{
background:transparent url(candy/pageheadBackground2.png) 0 100% no-repeat;
}
#content{
background:transparent url(candy/contentBackground.png) 0 0 no-repeat;
min-height:300px;
_height:300px;
}
#foot{
background:transparent url(candy/footBackground2.png) 100% 0 repeat-x;
}
#article{
width:450px;
float:left;
padding:40px 0 20px 0;
margin-left:25px;
}
#subContent{
display:inline;
width:180px;
float:left;
padding:25px 0 20px 0;
margin-left:30px;
color:#8B725A;
font-size:.9em;
}
#foot ul{
position:absolute;
top:45px;
}
#foot li{
list-style-type:none;
}
#foot #foot1{
width:200px;
position:absolute;
left:300px;
}
#foot #foot2{
width:200px;
position:absolute;
left:570px;
}
#foot #pageTop{
position:absolute;
left:482px;
top:-40px;
}
#foot #pageTop a{
display:block;
width:26px;
height:26px;
text-indent:-9999px;
text-decoration:none;
background:transparent url(candy/pageTop.png) 0 0 no-repeat;
float:left;
}
body{
font:normal 62.5%/1.8em Arial, Helvetica, sans-serif;
}
#content ul{
margin:0.8em 0 0.6em 1em;
padding-left:1em;
list-style-type:square;
}
ol{
margin:0.8em 0 0.6em 2em;
padding-left:1em;
list-style-type:lower-roman;
}
blockquote{
margin:0.8em 0 0.6em 1em;
padding-left:1em;
font-style:italic;
border-left:4px solid #E2D7CF;
}
img{
padding:2px;
border:1px solid #F2F2F2;
}
#content{
font-size:1.25em;
}
p{
margin:0.3em 0 0.6em 0;
}
a{
color:#9D6141;
font-weight:bold;
text-decoration:none;
}
a:hover{
background:#9D6141;
color:#FFE;
}
#article{
line-height:1.7em;
color:#635141;
}
h1,
h2,
h3,
h4{
font-family:Georgia, Times New Roman, Times, serif;
}
h2{
color:#98533B;
margin-bottom:.5em;
line-height:1.7em;
font-size:1.7em;
}
h3{
margin:0.8em 0 0.6em 0;
font-size:1.3em;
}
h4{
margin:0.8em 0 0.6em 0;
font-size:1.1em;
}
#subContent h2{
font-size:1.3em;
}
#subContent h3{
font-size:1.1em;
}
/* menu navigation */
.navsite {width: 845px; height: 35px; z-index: 100;
margin-bottom: 3px; margin-left: 155px;}
/* menu bar */
#headermenu {width: 800px; height: 35px; z-index: 100; position: absolute}
#headermenu ul {
text-align: center;
list-style: none;
line-height: 20px;
font-size: small;
}
#headermenu a {
display: block;
width: 8em;
color: white;
text-decoration: none;
padding: 0.3em;
white-space: nowrap;
}
#headermenu li {
float: left;
padding: 0;
width: 8em;
background-color: #B67357; /* medium brown */
}
#headermenu li ul { /* second level lists */
position: absolute;
z-index:500;
left: -999em;
height: auto;
width: 8em;
border-width: 0.25em;
margin: 0;
}
#headermenu li:hover ul, #nav li.shfhover ul {
left: auto;
z-index:100;
}
#content {
clear: left;
color: #ccc;
}
#media screen and (max-width: 770px)
{
#headermenu {
width:770px;
margin:0 auto;
position:relative;
text-align:left;}
}
So your problem is you're absolutely positioning the menu from the left of the browser. So when you resize it it moves.
If you want the whole site to be centered but fluid you can use the following
width:100%; max-width:400px; margin:auto;
Here's a Fiddle
My web site seems to be working fine with every other broser but IE8, IE9 and compatibility mode!!
As soon as I disable my CSS, I see content, but when its switched back on I get nothing!
This is giving my hell.
This is my CSS here:
body {
background: center top url(./images/background.jpg) no-repeat;
background-color: #FFF;
margin: 0px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #8e8f91;
}
h1 {
font-size: 12px;
color: #FFFFFF;
text-transform: uppercase;
line-height: normal;
margin: 0;
padding: 0;
letter-spacing: 1px;
}
#Table_01 {
top:0px;
width:1200px;
margin: 0 auto;
}
.backing {
background: repeat transparent url(./images/backing.png);
padding: 4px;
margin-left: 4px;
margin-top: 443px;
width: 130px;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
letter-spacing: 1px;
}
.backing a, a:active {
text-decoration: none;
color: #FFFFFF;
}
.backing a:hover {
text-decoration: underline;
color: #FFFFFF;
}
.snipet {
background: repeat transparent url(./images/backing.png);
padding: 4px;
margin: 4px;
width: 100px;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
letter-spacing: 1px;
}
.snipet_text {
font-size: 12px;
font-style: italic;
font-weight: normal;
letter-spacing: 0px;
line-height: 18px;
}
.snipet_container {
margin: 10px;
}
a, a:active {
text-decoration: underline;
color: #8e8f91;
}
a:hover {
text-decoration: none;
}
a img {
border:none;
}
.clear {
clear:both;
}
ul.menu {
list-style:none;
margin: 0;
padding: 0;
}
ul.menu li {
width:auto;
height:29px;
margin-left: 1px;
}
ul.menu li a {
display:block;
position:relative;
}
ul.menu li a img {
position:absolute;
z-index:1;
}
ul.menu li span {
display:block;
height: 29px;
width: auto;
position:absolute;
z-index:2;
}
/* TABLES */
div.index-1_ {
position:absolute;
left:0px;
top:0px;
width:1200px;
height:17px;
}
div.index-2_ {
position:absolute;
left:0px;
top:22px;
width:33px;
height:675px;
}
div.index-3_ {
position:absolute;
left:33px;
top:22px;
width:208px;
height:221px;
}
div.index-4_ {
position:absolute;
left:241px;
top:22px;
width:12px;
height:675px;
}
div.index-5_ {
position:absolute;
left:254px;
top:22px;
width:82px;
height:29px;
}
div.index-6_ {
position:absolute;
left:335px;
top:22px;
width:10px;
height:43px;
}
div.index-7_ {
position:absolute;
left:346px;
top:22px;
width:102px;
height:29px;
}
div.index-8_ {
position:absolute;
left:447px;
top:22px;
width:11px;
height:43px;
}
div.index-9_ {
position:absolute;
left:459px;
top:22px;
width:77px;
height:29px;
}
div.index-10_ {
position:absolute;
left:535px;
top:22px;
width:10px;
height:43px;
}
div.index-11_ {
position:absolute;
left:546px;
top:22px;
width:87px;
height:29px;
}
div.index-12_ {
position:absolute;
left:632px;
top:22px;
width:10px;
height:43px;
}
div.index-13_ {
position:absolute;
left:643px;
top:22px;
width:73px;
height:29px;
}
div.index-14_ {
position:absolute;
left:715px;
top:22px;
width:485px;
height:43px;
}
div.index-15_ {
position:absolute;
left:253px;
top:46px;
width:82px;
height:14px;
}
div.index-16_ {
position:absolute;
left:345px;
top:46px;
width:102px;
height:14px;
}
div.index-17_ {
position:absolute;
left:458px;
top:46px;
width:77px;
height:14px;
}
div.index-18_ {
position:absolute;
left:545px;
top:46px;
width:87px;
height:14px;
}
div.index-19_ {
position:absolute;
left:642px;
top:46px;
width:73px;
height:14px;
}
div.index-20_ {
position:absolute;
left:253px;
top:60px;
width:1px;
height:481px;
}
div.index-21_ {
position:absolute;
left:254px;
top:60px;
width:249px;
height:470px;
background-image: url(./images/projects/HomeProject001.jpg);
}
div.index-22_ {
position:absolute;
left:503px;
top:60px;
width:618px;
height:442px;
background-color: #CBCBCB;
}
div.index-23_ {
position:absolute;
left:1121px;
top:60px;
width:79px;
height:632px;
}
div.index-24_ {
position:absolute;
left:33px;
top:238px;
width:208px;
height:67px;
}
div.index-25_ {
position:absolute;
left:503px;
top:502px;
width:606px;
height:16px;
background-image: url(./images/index-25.png);
padding:6px;
}
div.index-26_ {
position:absolute;
left:254px;
top:530px;
width:867px;
height:11px;
}
div.index-27_ {
position:absolute;
left:253px;
top:541px;
width:619px;
height:151px;
background-color: #FFF;
}
div.index-28_ {
position:absolute;
left:872px;
top:541px;
width:249px;
height:151px;
background-image: url(./images/index-28.png);
}
/* sliding panel */
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
left: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
}
#panel {
width: 100%;
height: 280px;
color: #333;
background: transparent url(images/tab_bk.png) repeat;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #15ADFF;
text-align: left;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: #e01000;
text-align: left;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: underline;
color: #333;
}
#panel a:hover {
color: #666;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel ul {
margin: 0 0 5px 0;
padding: 0;
line-height: 1.6em;
list-style: none;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
margin-bottom: 25px;
padding: 0 15px;
min-height: 220px;
}
#panel .content .border {
border-left: 1px solid #333;
}
#panel .content .narrow {
width:1000px !important;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background-color: #efefef;
margin-right: 5px;
margin-top: 4px;
width: 300px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #ccc;
}
#panel .content .ui-state-highlight .ui-icon {background-image: url(./images/icon_sprite.png); width: 16px; height: 16px; margin-top: -2px;}
#panel .content .ui-state-error .ui-icon, #panel .content .ui-state-error-text .ui-icon { background: url(./images/icon_sprite.png) -16px 0 no-repeat !important; width: 16px; height: 16px; margin-top: -2px;}
#panel .content .ui-state-highlight { border: 1px solid #d2dbf4; background: #f4f8fd; color: #0d2054; }
#panel .content .ui-state-error { border: 1px solid #e2d0d0; background: #fcf0f0; color: #280b0b;}
/* BUTTONS */
#panel .content .ui-button {
outline: none;
color: #1c4257;
border-color: #7096ab;
display: block;
font-size: 14px;
font-weight: bold;
border: thin solid;
margin-top: 20px;
padding: 4px 20px 4px 20px;
}
#panel .content .ui-button:hover {
background: #fbc900;
}
/* Panel Tab/button */
.tab {
height: 25px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
width: auto;
font-weight: bold;
line-height: 25px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(images/tab_l.png) no-repeat left 0;
height: 25px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(images/tab_r.png) no-repeat left 0;
height: 25px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 25px;
background: url(images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
}
.tab ul.login li a:hover {
color: #333;
}
.tab .sep {color:#666}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 2px;
}
.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}
I know it's a little messy... Sorry :(
how to determine the error:
remove all classes from the stylesheet.
add the classes one by one.
see when/where it fails
fix/solve bug
if not at the end proceed to step 2
#panel {
width: 100%;
height: 280px;
color: #333;
background: transparent url(images/tab_bk.png) repeat;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
Though the DIV was actually closed off, for some reason IE completely ignored it!
This was the problem:
display: none;
So all I did was place the DIV in the footer at it all worked. It still puzzled me why it was only doing it in IE!!