Two Vertical ScrollBars in IE - html
Hi my code works correctly in Firefox, but in IE I'm getting the default vertical scrollbar. When I minimize the page I get the vertical and horizontal scrollbars I want, but in IE I get an additional vertical scrollbar. How can I get rid of it just in IE? I am using a CSS Reset. Here is my CSS:
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
/*font:inherit;*/
font-size:100%;
vertical-align:baseline;
text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
/*list-style:none;*/
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:’’;
content:none;
}
/* remember to define visible focus styles!
:focus{
outline:?????;
} */
/* remember to highlight inserts somehow! */
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
table{
border-collapse:collapse;
border-spacing:0;
}
/*CUSTOM*/
a {
/*color:#365C8C;*/
}
a:hover {
text-decoration:underline;
/*color:#365C8C;*/
}
p {
font:.85em arial,regular;
}
ul {
font:.85em arial,regular;
}
.bar {
background-color:#365C8C;
height:30px;
width:100%;
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
/*overflow-x:hidden;*/
min-width:1225px;
}
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow:auto;
height:100%;
width:100%;
background-color:#ADCCEB;
/*background-color:black;*/
/*background: url(background.png);*
/*background-size:100%;*/
}
.bold {
font-weight:bold;
}
.contentcontainer {
width:825px;
height:910px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
.extcontentcontainer {
width:825px;
height:645px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
img.fullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
And here is some of the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathfinder Outage Page</title>
<link rel="stylesheet" href="boilerplate.css">
</head>
<body class="fullbackground">
<img class="fullbackground" src="background.png" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src="pathfinder_logo.png"/>
</div>
<div class="topmiddle">
<h1 class="title">Pathfinder is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1225px; height:910px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
<div class="contentcontainer">
Remove:
overflow: auto;
From the body in the CSS.
That should fix it.
It looks like both your body and your div are producing scrollbars because you set the height to 100%, the div inside the body is larger than the body, and the body itself is larger than your window, so you have two overflowing elements inside each other. Just get rid of height: 100% in your div nad you should be fine.
Use the "if IE" built in HTML to put in custom css files to fix the issue in IE like:
<!--[if IE]>
<link rel="stylesheet" href="ie-specific.css">
<![endif]-->
Check to see if Compatibility Mode for Intranet Sites is on. I had this issue and when I disable Compatibility Mode the second scroll bar went away.
I think there is another way to fix this without getting rid of the overflow: auto style.
My understanding of the issue and the workaround suggested is based on this nice article you could check for more details: https://remysharp.com/2008/01/21/fixing-ie-overflow-problem
The way I understood the problem is that in Chrome and Firefox, the scroll-bars are drawn outside the containers, so they don't affect the container width when shown.
While in IE the scroll-bars are drawn inside the containers and their width/height is what's causing the container to overflow and display a second scroll-bar.
A typical use case where this would happen is on tables with vertical scroll (too many rows) and horizontal scroll (too many columns):
the table body which already has a horizontal scroll because of the long list of columns, will add a second horizontal scroll because of the x-overflow that the vertical scroll width will add will add when drawn inside the table body (for the long list of rows).
One of the tricks I tried and that seemed to work is to add a padding to the container to allow it to draw the scroll bar without overflowing:
To fix a double horizontal scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-vertically-class {
padding-right: 20px;
}
}
To fix a double vertical scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-horizontally-class {
padding-bottom: 20px;
}
}
Related
Why is border radius not showing up in IE?
How do I get border radius to work in IE?
I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.
Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.
I also have this meta tag in my html:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The code is below.
CSS:
body .overlay {
background-color: rgba(0, 114, 198,.7);
height:100%;
position:relative;
}
body .layer {
background: url('photo-homebanner.jpg') 55%;
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}
body .goldenDiv {
width:665px;
height:326px;
position:fixed;
z-index:100;
margin-top:-38px;
margin-left:-8px;
}
body h1 {
color:white;
text-align:center;
font-family:sans-serif;
padding-top:22px;
padding-bottom:5px;
font-size:45px;
}
body h3 {
color:white;
text-align:center;
font-family:sans-serif;
font-weight:100;
padding-bottom:14px;
}
body h3.hidden {
visibility:hidden;
padding-bottom:0px;
position:absolute;
top:220px;
left:190px;
}
body input:focus {
outline:none;
}
body .prettyInput {
align-content: center;
padding-left: 20px;
padding-right: 70px;
margin-left: 106px;
width: 350px;
height: 61px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
border: hidden;
margin-bottom: 40px;
}
body .inputOverlap {
position:absolute;
top:167px;
top:166px\9;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
body hr {
color:white;
position:absolute;
top: 77px;
left:120px;
align-content:center;
}
#-moz-document url-prefix() {
body .inputOverlap {
position:absolute;
top:168px;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
}
HTML:
<body>
<div class="goldenDiv">
<div class="layer">
<div class="overlay">
<h1>Stay ahead of industry news!</h1>
<hr width="450px"/>
<h3>Let us send you the latest from our Marketing Department.</h3>
<input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
<input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
<h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
<h3>100% privacy, no spam, just news.</h3>
</div>
</div>
</div>
</body>
The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property. Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;. Stylistic notes (unrelated to the problem): border-radius: 0 12px 12px 0; means the same thing as border-top-right-radius:12px; border-bottom-right-radius:12px; but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved. The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.
Having browser difference issues (Firefox) - overflow and/or height of wrapper
I find that the footer is displayed properly on Chrome but it looks like it doesn't get overflow:hidden; on Firefox. The wrapper div is still going a little more below the footer.
<div class="wrapper6"> // at gallery.html
<div class="wrapper8"> // at galeri2013.html
Here are CSS properties of these two wrapper divs:
.wrapper6 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:180% !important;
font-family: orator std;
overflow:hidden;
}
.wrapper8 {
margin:0 !important;
padding:0 !important;
left:0;
top:0;
position:absolute;
background:url(../images/texture.png) repeat;
width:100%;
height:280% !important;
font-family: orator std;
overflow:hidden;
}
And properties for both footers;
galeri2013.html;
.footy4 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:96%;
overflow:hidden;
}
gallery.html;
.footy7 {
position:relative;
display:inline !important;
float:left;
z-index:1;
left:0;
margin-bottom:-4.3%;
transform:skewX(8deg);
-webkit-transform:skewX(8deg);
transform:skewY(-2.5deg);
-webkit-transform:skewY(-2.5deg);
background-color:#e81b1b;
width:100%;
height:120px;
margin-top:150%;
overflow:hidden;
}
I think I'm not using best ways to handle it, if you see anything wrong/not the best way of coding please tell me so that I can learn and also improve myself.
To clarify again, I want to have my footer stuck to bottom on Firefox, as it is on Chrome!
Okay! After some hours I saw what's wrong... I've put the footer div into wrapper div and everything went normal! So this is what I did to achieve it basically; <div class="wrapper"> //some other content <div class=footer> //footer content </div> </div> and I've put backoverflow:hidden; to wrapper which I had removed to test what is wrong. You can see what other css properties I've used up here at the question. Hope these can be useful to someone and thanks for everyone who helped.
Aligning div and section elements with flex CSS
I'm currently redoing some code to update to HTML5 (and trying to de-uglify CSS), but so far my alignment and layout doesn't seem to be working as expected. Here's part of what I have:
<main class="width">
<div class="r1">
<section class="c1">
<h1>header</h1>
stuff
</section>
<!--Line Break-->
<section class="c1">
<h1>header</h1>
stuff
</section>
</div>
<!--Next Column-->
<div class="r2">
<section class="c2">
<h1>header</h1>
stuff
</section>
</div>
</main>
CSS:
#font-face {
font-family:'Roboto';
font-style:normal;
font-weight:400;
src:url(/resources/font.woff) format('woff');
}
* {
margin:0;
padding:0;
font-size:small;
font-family:Roboto;
vertical-align:middle;
border:none;
text-decoration:none;
}
.width {
margin:0 auto;
width:86%;
min-width:1000px;
}
.bg {
min-width:1000px;
background:linear-gradient(#444, #000, #444);
}
main {
line-height:1.5;
text-align:center;
}
body>.main {
font-size:0;
}
section {
border:1px solid #BBB;
background:#000;
border-radius:7px;
display:inline-block;
overflow:hidden;
}
h1 {
background:linear-gradient(#444, #000, #444);
padding:5px;
color:#FFF;
}
.r1 {
color:#FFF;
display:inline-block;
}
.r2 {
color:#FFF;
display:inline-block;
}
.c1 {
width:33%;
}
.c2 {
width:66%;
}
(Ignore r1 and c1 naming. They don't actually represent a row or column)
However, this does not work the way it used to. What I'm trying to do is to have two rows of 66% width columns above each other, and then next to them, a larger single 33% width column to the right of them. Instead, I've got the the first two sections on one line, taking up a total of 66% width (so each section is 33% width), and then the next section ends up underneath it.
Ideally, I want to use the flex code, so that I can use up all available space, but I'm still new to it, and don't know my way around it very well. The problem with using percentage widths is that even after white-space removal, things still break to the next line when zoomed in enough, and I think that the flex method is more elegant and modern anyway.
Centering 2 divs that may not be always present at the same time CSS
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
Div Tag/Background Not Centering
I'm in the early stages of building a mobile version of our website, and I'm already having an issue with a div tag & background not centering. The stylesheet code is as follows:
<!DOCTYPE html>
<html><head>
<style type="text/css">
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica, sans-serif;}
header {
display:block;text-align:center;width:100%;height:6.5em;
}
.topHeader {display:block; width:100%; height:5.4em;}
#acdlogo {
float:left;text-align:left; overflow:hidden; display:inline;
}
#acdHeadLinks {
float:right;text-align:right;margin-top:5px;
}
.clearAll { clear:both; font-size:0; padding:0; margin:0; }
.search-bg {
text-align:center;width:85%;background-color:#265e99;
height:45px;z-index:1000; border-radius:5px; -webkit-border-radius:5px;
}
</style>
</head>
Here is the code that appears after the stylesheet code:
<body>
<div>
<header>
<div class="topHeader" align="center">
<div id="acdlogo">
<img src="images/logo.gif" border="0" alt="Alt Text">
</div>
<div id="acdHeadLinks">
<img src="images/mcontact.png" border="0"><br>
Directions My Account My Cart
</div>
</div>
<div align="center" class="search-bg" id="searchgcs">
hello world
</div>
</header>
</div>
</body></html>
The problem is that the blue background is supposed to hold the search engine form, but it's aligning left not center, and I don't know what I need to do to center it. I'm trying real hard not to have to use tables. Anybody can help me figure this out? Thanks!
UPDATE: Alright I have a new error. I'm trying to center an image using div tags and I'm not getting anywhere, even with the answer below. I've even stripped down the code to only attempt to center the image and no go. The image is always aligned left inside the div tag and I want it centered. Here is my code:
<!DOCTYPE html>
<html><head><title></title>
<style type="text/css">
#mainImage {
width:300px;
margin:0 auto;
padding:0;
}
img.curMainImage {
max-height:240px;
max-width:240px;
}
</style>
</head>
<body>
<div id="mainImage"><img class="curMainImage" src="Image Here" border="0" /></div>
</body>
</html>
Anybody can help?
add margin: 0 auto; to your .search-bg - http://jsfiddle.net/7djxY/1/
.search-bg {
text-align:center;
width:85%;
margin: 0 auto;
background-color:#265e99;
height:45px;
z-index:1000;
border-radius:5px;
-webkit-border-radius:5px;
}
Update: the margin: 0 auto; is used to set the top and bottom margins to 0, and the left-right margins to auto. In that case the browser will automatically detect the available side margin space and distribute it equally to the left and right. And with the same margins both sides the element becomes centered.