I have a strange problem between two div's , there is a space below the top div which only shows in IE8. Although I am using IE8 at home I don't see it, but at other places I do.
Image in IE (red is the space that shouldn't be there):
In firefox and every other browser it shows fine as shown below:
<div id="top">
<form action="" onsubmit="">
<table >
<tr>
<td>
Name<input type="text" />
</td>
<td>
Password<input type="password" />
</td>
<td>
</td>
</tr>
</table>
</form>
</div>
<div id="header">
</div>
#top
{
margin-right: auto;
margin-left: auto;
margin-top: 0px;
background-color: #000000;
top: 0px;
text-align: center;
font-size: 16px;
}
#header
{
width: 100%;
height: 100px;
background-color: #336699;
margin: 0px;
padding: 0px;
}
I have tried floating both div's but I cannot seem to get it working.
Any advice? Thanks
Set the margin of all form elements to 0px:
form
{
margin: 0px;
}
Related
Is there any way to prevent div3 from being wrapped to the next line and instead of vertical scrolling do horizontal?
<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="inner">div1</div>
<div class="inner">div2</div>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>
table { width: 400px; height: 100px; }
td { width: 50%; border: 1px solid gray; }
div.container { height: 100px; width: 100%; background: red; overflow-x: scroll; }
div.inner { height: 100px; width: 80px; display: block; float: left; background: blue; color: #fff; }
jsfiddle example
with floats you can't have scroll on the horizontal axis because if a floating element can't fit in the remaining space it will fall to the next line.
So we have to treat the divs as inline level blocks and set white-space:nowrap to prevents divs from breaking to next line.
table {
width: 400px;
height: 100px;
table-layout: fixed;
}
td {
width: 50%;
border: 1px solid gray;
}
div.container {
height: 100px;
width: 100%;
background: red;
overflow-x: scroll;
/* added */
white-space: nowrap;
/* to remove space between divs */
font-size: 0;
}
div.inner {
height: 100px;
width: 80px;
background: blue;
color: #fff;
/*display: block; removed */
/*float: left; removed */
/* added */
display: inline-block;
/* because font size in inherited it will be set to 0
but we want text to apear
*/
font-size: 16px;
}
<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="inner">div1</div>
<div class="inner">div2</div>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>
if you need only 3 divs and you are using bootstrap you can do something like this:
<table>
<tr>
<td>td1</td>
<td>
<div class="container">
<div class="col-3">div1</div>
<div class="col-3">div2</div>
<div class="col-3">div3</div>
</div>
</td>
</tr>
</table>
css
div {
display: inline-block;
}
js fiddle
bootstrap grid-system split each row in 12 columns by default, may you want to take a look to their documentation: grid system
Add <br> to your code:
<table>
<tr>
<td>td1</td>
<br>
<td>
<div class="container">
<div class="inner">div1</div>
<br>
<div class="inner">div2</div>
<br>
<div class="inner">div3</div>
</div>
</td>
</tr>
</table>
I'm having a bit of an issue with my media query (I'm new to using these, this is the "safest" way to render html emails responsive).
My media query:
#media only screen and (max-width: 600px){
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.submitBtn {
margin: auto !important;
float: none !important;
}
td, h3, h4, .branding, .paragraph, .container {
display: block !important;
width: 100% !important;
float: none !important;
height: auto !important;
margin: auto !important;
padding: 0 !important;
text-align: center !important;
}
td {
padding-right: 5px !important;
padding-left: 5px !important;
padding-top: 10px !important;
padding-bottom: 15px !important;
}
td.branding, img.branding {
display: block !important;
text-align: center !important;
margin: 0 auto !important;
}
.branding {
padding-bottom: 10px !important;
}
.toggle {
text-align: left;
}
table.center {
text-align: center !important;
}
.display-none {
display: none !important;
}
.checkbox {
display: block !important;
margin: auto !important;
max-width: 100% !important;
float: none !important;
}
}
As a note, I do have the meta for device-width in the head. All other styling is rendering except where I have two td's, they are not stacking on mobile.
In chrome, using the inspector & setting it responsive, it shows they should be stacking on mobile but when I actually test it to myself they are not.
My first module that should be stacking (I put placeholders to remove sensitive data)
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center">
<tr>
<td class="branding logo" width="315" align="left">Stacking image goes here
</td>
<td class="branding" width="315" align="right"><span class="lighter">Text & More</span> <span class="normal">Stacking text goes here</span>
</td>
</tr>
</table>
My other bit that should be stacking:
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center">
<tr>
<td class="description" align="left" width="75%">
<h4 class="indent padding-t"><span class="normal middle"></span></h4>
<p class="paragraph indent">Y
</p>
</td>
<td class="checkbox">
<input type="checkbox" id="checkbox" name="" onclick="changeValue()" value="">
<label class="toggle" for="checkbox"></label>
<input type="hidden" id="hidden" name="" checked value="">
</td>
</tr>
</table>
Thanks in advance for your help and I apologize if this is a "rookie" error because I'm about certain it is!
It turns out that the order of my css was messing everything up. I deleted all styling inside the media query and re-organized it and it works like a charm!
In my responsive webpage. On that page I have text and then there is a button. The problem is button moves on text when I resize the page.
The button needs to be below text and should remain below text as I resize the page.
If you copy and paste the code in HTML, and then try to resize the page, you would see button does change size (as I need) but the location of the button is not ok. It goes on text
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<style>
#media screen and (max-width: 500px) and (min-width: 300px) {
#Space_I { height:28px;}
#Space_J { height:22px;}
#Space_K { height:3%;}
#Main_Title {
width: auto;
height: 48px;
font-size: 23px;
line-height: 1.04;
color: #222222;
margin-left:6%;
margin-right:6%;
}
#First_Blog{
height: 100px;
}
#First_Read_More_Button{
width: 291px;
height: 45px
}
}
#media screen and (max-width: 1600px) and (min-width: 500px) {
#Space_I { height:33px;}
#Space_J { height:26px;}
#Space_K { height:3%;}
#Main_Title{
width: auto;
height: 36px;
font-size: 31px;
color: #000000;
margin-left:5%;
margin-right:5%;
}
#First_Blog{
height: 120px;
}
#First_Read_More_Button{
width: 167px;
height: 45px;
}
}
body {
margin: 0 !important;
padding: 0 !important;
}
</style>
</head>
<body>
<div class="wholepage" style="margin: auto;">
<div class="container" >
<table>
<tbody>
<tr>
<td>
<span id="Space_I" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="Main_Title" style="font-family: Arial;font-weight: bold;text-align: center;">
14 Best travel hacks for globetrotters
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_J" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="First_Blog" style="font-family: Arial;font-size: 15px;line-height: 1.5;text-align: center;color: #222222;">
<p style="margin-left:6%;margin-right:6%;text-align:justify">As fantastic as traveling is, it can be stressful at times – you have to pack and keep track of everything you need while navigating a new environment. But fear not, friends. We collected 14 travel hacks that will help you MacGyver your next trip: we tell you why you should always use the shower caps in hotel rooms, why you need to buy diapers even if you don’t have a baby, and why dryer sheets are best used before doing laundry. And that’s only the beginning. </p>
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_K" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div style="text-align:center;overflow:hidden;">
<button id="First_Read_More_Button" style="border-radius: 100px;border: solid 0.8px #00a4c3;">Read More</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The read more button needs to below the text
Simply remove the height you are applying to #First_Blog. By specifying a height the content is overflowing and going above the button.
#media screen and (max-width: 500px) and (min-width: 300px) {
#Space_I {
height: 28px;
}
#Space_J {
height: 22px;
}
#Space_K {
height: 3%;
}
#Main_Title {
width: auto;
height: 48px;
font-size: 23px;
line-height: 1.04;
color: #222222;
margin-left: 6%;
margin-right: 6%;
}
#First_Read_More_Button {
width: 291px;
height: 45px
}
}
#media screen and (max-width: 1600px) and (min-width: 500px) {
#Space_I {
height: 33px;
}
#Space_J {
height: 26px;
}
#Space_K {
height: 3%;
}
#Main_Title {
width: auto;
height: 36px;
font-size: 31px;
color: #000000;
margin-left: 5%;
margin-right: 5%;
}
#First_Read_More_Button {
width: 167px;
height: 45px;
}
}
body {
margin: 0 !important;
padding: 0 !important;
}
<body>
<div class="wholepage" style="margin: auto;">
<div class="container">
<table>
<tbody>
<tr>
<td>
<span id="Space_I" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="Main_Title" style="font-family: Arial;font-weight: bold;text-align: center;">
14 Best travel hacks for globetrotters
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_J" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div id="First_Blog" style="font-family: Arial;font-size: 15px;line-height: 1.5;text-align: center;color: #222222;">
<p style="margin-left:6%;margin-right:6%;text-align:justify">As fantastic as traveling is, it can be stressful at times – you have to pack and keep track of everything you need while navigating a new environment. But fear not, friends. We collected 14 travel hacks that will help you MacGyver your
next trip: we tell you why you should always use the shower caps in hotel rooms, why you need to buy diapers even if you don’t have a baby, and why dryer sheets are best used before doing laundry. And that’s only the beginning. </p>
</div>
</td>
</tr>
<tr>
<td>
<span id="Space_K" style="display:block"></span>
</td>
</tr>
<tr>
<td>
<div style="text-align:center;overflow:hidden;">
<button id="First_Read_More_Button" style="border-radius: 100px;border: solid 0.8px #00a4c3;">Read More</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
By the way you can simplify your code as you don't need the table structure and all theses media queries. You can simply make it like this and play with padding/margin for spacing :
#First_Blog {
font-family: Arial;
font-size: 15px;
line-height: 1.5;
text-align: center;
color: #222222;
margin: 20px 6%;
text-align: justify;
}
#Main_Title {
font-family: Arial;
font-weight: bold;
text-align: center;
font-size: 23px;
line-height: 1.04;
color: #222222;
margin: 50px 6% 0;
}
#First_Read_More_Button {
border-radius: 100px;
border: solid 0.8px #00a4c3;
width: 291px;
height: 45px;
display: block;
margin: auto;
}
body {
margin: 0 !important;
padding: 0 !important;
}
<div id="Main_Title">
14 Best travel hacks for globetrotters
</div>
<div id="First_Blog">
<p>As fantastic as traveling is, it can be stressful at times – you have to pack and keep track of everything you need while navigating a new environment. But fear not, friends. We collected 14 travel hacks that will help you MacGyver your next trip: we
tell you why you should always use the shower caps in hotel rooms, why you need to buy diapers even if you don’t have a baby, and why dryer sheets are best used before doing laundry. And that’s only the beginning. </p>
</div>
<button id="First_Read_More_Button">Read More</button>
I took the time to view all other similar questions before I posed my own, but they either didn't solve my problem or, I admit, I didn't quite understand them.
I have a div stacked inside of another div, and the former div has some space at the top of it that I can't, for the life of me, get rid of. I've messed around with padding, margins, removed both, but it's still there. Below are both the CSS & HTML. The problem div is mpcontent. Here is a picture of the problem as well: http://i44.tinypic.com/34i4hw7.png
Thanks in advance!
.mpfade {
position: relative:;
width: 250px;
height: 450px;
moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
opacity: 0.0;
margin-top:-450px;
margin-bottom: 100px;
}
.mpfade:hover {
width: 250px;
height: 450px;
opacity: 0.95;
}
.mpb {
width: 200px;
height: 5px;
background-color: transparent;
border-top: 1px solid #FE9D04;
border-bottom: 1px solid #FE9D04;
margin-top: -8px;
margin-bottom: 50px;
margin-right: auto;
margin-left: auto;
}
.mpbg {
width: 250px;
height: 450px;
background-image:url(http://i42.tinypic.com/35hn6g2.jpg);
}
.mptain {
overflow:hidden;
position: relative;
top: -68px;
width: 200px;
height: 84.9%;
background-color:#fff;
margin-left: auto;
margin-right: auto;
}
.mptitle {
margin-top: 10px;
width:250px;
background-color: #000;
padding: 10px;
}
.postcount {
position: relative;
top: 0px;
padding-top: 10px;
color:#FE9D04;
font-family: flamenco;
font-weight: 300;
font-size: 30px;
text-transform: uppercase;
font-style:italic;
letter-spacing: 5px;
text-align: center;
}
.mpalias {
padding-top: 10px;
color:#FE9D04;
font-family: flamenco;
font-weight: 300;
font-size: 30px;
text-transform: uppercase;
font-style:italic;
letter-spacing: -2px;
}
.istuff {
font-family: calibri;
font-size: 9px;
color: #000;
border-bottom: 1px solid #fe9d04;
text-transform: uppercase;
text-align: left;
letter-spacing: 5px;
margin-right: 8px;
font-weight: bold;
font-style: italic;
}
.ilink {
border-radius: 50%;
background-color: #fe9d04;
width: 45px;
height: 45px;
line-height: 16px;
text-align: center;
padding: 5px;
font-family: flamenco;
font-weight: 300;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
font-style:italic;
opacity: 0.6;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.ilink:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.mpcontent {
background-color: #dedede;
margin-left: auto;
margin-right: auto;
width: 180px;
height: 450px;
letter-spacing: 2px;
text-align: left;
color: #000;
font-family: calibri;
font-size: 8px;
padding: 0px;
}
.mptext {
padding-top: 5px;
letter-spacing: 2px;
text-align: left;
color: #000;
font-family: calibri;
font-size: 8px;
font-weight: bold;
}
<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;">
<img src="">
</div>
<div class="mpfade">
<div class="mpbg">
<div class="mpb"></div>
<div class="mptain">
<div class=postcount>0</div>
<div class="mpcontent">
<table width="180px;">
<tr>
<td colspan="2" style="vertical-align: top" ;>
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td style="vertical-align: top" ; "><div class=istuff>text</div></td>
<td style="vertical-align: top ";">
<div class=istuff>text</div>
</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td style="vertical-align: top; padding-top: 5px">
<div class=istuff>text</div>
</td>
<td style="vertical-align: top; padding-top: 5px">
<div class=istuff>text/clan</div>
</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px">
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td colspan="2">text</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 10px">
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td colspan="2">text</td>
</tr>
<tr>
<td style="vertical-align: top; padding-top: 10px">
<center>
<div class=ilink><a href="">
text</a>
</div>
</center>
</td>
<td style="vertical-align: top; padding-top: 10px">
<center>
<div class=ilink><a href="">
text</a>
</div>
</center>
</td>
</tr>
</table>
<p>
<p>
<div class=mpalias>text</div>
<p>
<div class=mptext>is
<!-- |status| -->
</div>
</div>
</div>
</div>
</div>
</div>
By default the margin has different values depending of the browser that you are using. So, to have the same behaviour between different browsers you can reset your margin values to 0px. As you can see in the example above:
html, body {
margin: 0px;
}
And to have the space between your white content and the grey box update your code to:
.mptain {
top: -45px;
}
Instead of
.mptain {
top: -68px;
}
Instead of:
To see the example working check this JSFiddle.
You can have more information about how margin works here.
And you can also use CSS reseters, those can be found here.
You have not formatted the page itself.
Though your code addresses the styling of your div elements, you did not style the body or html tags. They are the containing elements in which your div elements reside.
html, body { margin: 0; }
Browser adds styling by default.
Write:
body,html{margin:0;}
It is better to reset styles by writing:
*{margin:0;padding:0;}
DEMO here.
This has already been answered, but I'd like to shed some more light on how to fix up your code.
There are numerous things that can affect how your web page is displayed. If your code doesn't validate properly, some browsers won't render it properly and will render it using different formats: http://validator.w3.org/
There are several errors in your code I can see easily.
</table>
<p>
<p>
<div class=mpalias>text</div>
<p>
<div class=mptext>is
<!-- |status| -->
</div>
</div>
</div>
</div>
</div>
</div>
After:
is
You're missing three paragraph tags. It should look like this (technically I don't think you should be using three paragraph tags anyway, just one will suffice).
</table>
<p>
<p>
<div class=mpalias>text</div>
<p>
<div class=mptext>is
<!-- |status| -->
</div>
</p>
</p>
</p>
</div>
</div>
</div>
</div>
</div>
These style attributes are messed up:
<div class="mpcontent">
<table width="180px;">
<tr>
<td colspan="2" style="vertical-align: top" ;>
<div class="istuff">text</div>
</td>
</tr>
<tr>
<td style="vertical-align: top" ; "><div class=istuff>text</div></td>
text
It should be:
<td style="vertical-align: top;">
Also, you should ALWAYS wrap your attributes in quotes:
<div class="istuff">
Technically if there are no special characters in it it will validate... but its VERY easy to forget about them, and although I haven't tested it the validator will likely throw a warning at you anyway. Its always easier and more efficient to wrap all attributes in quotes.
Here's an article on W3 Schools about it: http://www.w3schools.com/html/html_attributes.asp
I'd also recommend moving all your inline styles:
<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;">
To your stylesheet. Its easier to maintain your styles from a stylesheet; if they're inline you have to constantly edit the HTML code all the time. If they're in a separate stylesheet, you only have to edit the HTML on certain occasions if you need to make major changes.
Its also a good idea to use a reset.css file before calling your other CSS styles. I think Eric Meyer's CSS solution is the most well-rounded: http://meyerweb.com/eric/tools/css/reset/
Different browser's display your website in different ways, so a reset.css helps to reset all the basic styles to one specific setting so it will display the same in all browsers. It will STILL vary slightly based on browser, but it won't be nearly as bad.
I got a similar type of issue. Even though I set the html and body tag as shown below still I got extra space as shown on top as shown in the image.
For me it resolved after removing "doctype html" tag on top of the page.
html, body{
margin: 0px;
padding:0px;
}
Extra space on top
I have a product template that looks like this:
The html for it is:
<div id="product">
<div id="cont">
<div class="productPictures">
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
<a
href="images/spalt_images/body_images/525a.JPG"
target="_blank"
>
<img src="images/spalt_images/body_images/525a.JPG"
width="180"
height="139.52153110048"
alt="front image" class="productImage"/>
</a>
</div>
<div class="productNumber"> #123 </div>
<div class="productDesc">
<table>
<col id="col1" />
<col id="col2" />
<tbody>
<tr>
<td> Body Type: </td>
<td> Stratocaster </td>
</tr>
<tr>
<td> Body Wood Type: </td>
<td> Walnut </td>
</tr>
<tr>
<td> Weight: </td>
<td> 12.7 lbs </td>
</tr>
<tr>
<td> Thickness: </td>
<td> 1 inch </td>
</tr>
<tr>
<td> Routing: </td>
<td> Standard </td>
</tr>
</tbody>
</table>
<div class="productPrice">
$456.00
</div>
</div>
</div>
</div>
</div>
</div>
and the css:
#product {
background-position: left top;
border: 2px solid #2D0000;
background-color: #42533E;
width: 650px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px
}
.productNumber {
padding: 4px;
font-size: 35px;
color: #C9E0D0;
float: right;
text-shadow: 2px 2px 3px #252525;
}
.productPictures
{
float: left;
padding: 0px;
margin: 5px 0px 10px 0px;
width: 200px;
}
.productDesc{
padding: 5px 10px 5px 5px;
color: #FFFFFF;
font-size: large;
float: left;
width: 400px;
height: 100%;
}
.productPrice {
font-size: 25px;
color: #F4D582;
text-align: right;
font-weight: bold;
text-shadow: 2px 2px 3px #252525;
}
.productImage {
border: 2px solid #20281E;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
}
#col1{
width: 40%;
}
#col2{
width: 60%;
}
table{
width: 100%;
}
So what I would want is for the product description div to end up at the bottom so that the price would also end up at the bottom. I tried to set height to 100% but this did not have any effect.
Thanks
And here is a working example.
relevant code:
#product {
...
position:relative;
}
.productDesc{
...
position:absolute;
bottom:0px;
right:0px;
}
First of all you need to set float:left on the div with the id of cont.
You have elements inside that container floating left, but that container is not, therefore its height is not expanding to its content.
Then you can set the productDesc div to be position:absolute and bottom:0px.
Of course, this will mess with its relative positioning to the photos, which it currently has, but if you want it fixed to the bottom of the parent container, that's the only way. You can then set the right:100px or however much it needs to be horizontally positioned how you would like.
Edit:
Here's a working example: http://jsfiddle.net/citizenconn/hXSmK/
Clear floats for your .productDesc and .productPictures
Use display:inline-block for those 2 DIVs.
And reduce the width of your .productDesc. Say, make it 350px
This will work.