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>
Related
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!
The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.
For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>
I am having difficulty jumping to a section on the same page using
ahref and aname. I am making the buttons the link to a specific div further down the page. While clicking on the link makes it go to the right div, it does jumps a few lines into their respective divs, while I would like it to show the top of the div. I would appreciate any help solving this problem.
Here is the html (the href tags are in class navrow):
<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td><button>About Me</button></td>
<td><button>Work Samples</button></td>
<td><button>Resume</button></td>
<td><button>Blog</button></td>
<td><button>Contact</button></td>
</tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>
</div>
<div class="samples">
<table>
<th>Pokemon</th>
<tr>
<td>
<p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
</td>
</tr>
<tr>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
</td>
<td>
<p>Hello Charzard</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
</td>
</tr>
</table>
<div class="resume"><a NAME="resume"></a>Resume Page</div>
<a NAME="blog">
<div class="blog">Blog Page</div>
<a NAME="contact">
<div class="contacts">Contact Page</div>
</div>
</body>
</html>
Here is the CSS in case you need it:
html, body{
font-family: 'Lato', sans-serif;
width: 100%;
padding: 0;
margin: 0;
}
p{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.header{
position: fixed;
z-index: 20;
width: 100%;
background-color: black;
text-align: center;
}
.navrow{
background-color: white;
height: 50px;
width: 100%;
}
.navrow table td{
padding-left: 150px;
}
button{
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
}
.aboutpage h1{
color:red;
}
.samples {
float: left;
height: 70%;
width: 100%;
}
.resume {
float: left;
width: 100%;
height: 900%;
background-color: rgb(0,300,200);
}
.blog {
float: left;
width: 100%;
height: 80%;
background-color: rgb(0,300,150);
}
.contacts {
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
#AboutPictures {
margin-top: 170px;
float: right;
background-color: rgb(0,200,255);
}
#AboutPictures h3{
margin-left: 20px;
}
img[src*="tumblr"]{
height:360px;
width:40%;
float: right;
top: 10px;
padding:0 0 0 0;
}
.biopage {
position:relative;
}
.samples table{
position: relative;
width: 100%;
}
.samples td{
text-align: center;
width: 30%;
height:300px;
position:relative;
table-layout: fixed;
background-color: rgb(0,300,300);
}
.samples td img{
width: 290px;
height:290px;
z-index: 0;
}
.samples td:hover img{
opacity: .5;
}
.samples p{
margin: 0;
position:absolute;
left: 0;
top: 50%;
right:0;
z-index: 10;
color: #fff;
font-size: 20px;
text-align: center;
}
.samples td:hover p{
visibility: visible;
}
.samples td p{
visibility: hidden;
}
.container{
background color: white;
width: 25%;
float: right;
}
.container img{
width: 100%;
}
It can be helpful to place the named anchors above the area you want to move to rather than within it.
I would propose:
<a NAME="resumelnk"></a>
<div class="resume">Resume Page</div>
<a NAME="bloglnk"></a>
<div class="blog">Blog Page</div>
<a NAME="contactlnk"></a>
<div class="contacts">Contact Page</div>
And possibly correct your HTML markup to include the closing anchor tags (</a>) which appear to be missing.
One final thought is to not name anchors the same as a class. Not that this is specifically a problem. But I tend to use class names for classes and not for other elements on a page.
The result you are getting is partly a matter of not enough web page content below the targets - - the browser simply can't scroll any lower (which would bring your content to the top of the browser) because the page content is finished.
Also, your targets are inside of the sections you want to target. Target the div's, not anchors within the div's.
Another issue is that you haven't closed your <a> elements for the targets.
Also, you don't really need buttons to accomplish what you want.
Here's some updated code that (just for demonstration) adds a bottom margin to your samples div so that the bottom targets have more room to move up the page. This is just for demonstration, it's not considered a best practice.:
.button { border:1px solid grey; border-radius:1px; background-color:#e0e0e0; text-decoration:none; padding:2px; color:#000; }
.button:active {border:1px solid black; }
.samples {margin-bottom:300px;}
<div class="header">
<br>
<br>
<h1>Learn More About Charles Guthrite</h1>
<p></p>
<div class="navrow">
<table>
<tr>
<td>About Me</td>
<td>Work Samples</td>
<td>Resume</td>
<td>Blog</td>
<td>Contact</td>
</tr>
</table>
</div>
</div>
<div id="AboutPictures">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQguaNQJU2J-h8TmbEVIpqDdp0blsw2i7dESDKllu_XnhdQ8Lv71_eOu-g">
<h3>Charles Guthrite is a Northwestern University senior majoring in Journalism. He is addicted to sports, YouTube, and quality journalism. Charles's favorite publications include the Wall Street Journal, Daily Northwestern and New York Times. You can often find him in the gym, coding, or watching NFL or NBA games. <h3>
</div>
<div class="samples">
<table>
<th>Pokemon</th>
<tr>
<td>
<p>Squirtle is an amphibion Pokemon. He can shoot water and hide in his shell</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//006.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://assets.pokemon.com/assets/cms2/img/pokedex/full//001.png">
</td>
</tr>
<tr>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette3.wikia.nocookie.net/fantendo/images/a/a5/Pikachu_digital_art_pokemon_by_dark_omni-d5wotdb.png/revision/latest?cb=20141113035440">
</td>
<td>
<p>Hello Charzard</p>
<img src = "https://upload.wikimedia.org/wikipedia/en/5/5f/Pok%C3%A9mon_Lugia_art.png">
</td>
<td>
<p>Hello Charzard</p>
<img src = "http://vignette1.wikia.nocookie.net/pokemon/images/f/ff/Togepi.png/revision/latest?cb=20100731212849">
</td>
</tr>
</table>
<div class="resume" id="resume">Resume Page</div>
<div class="blog" id="blog">Blog Page</div>
<div class="contacts" id="contact">Contact Page</div>
</div>
You can provide a little css to your anchor targets to compensate for fixed position headers:
a.anchor{
display:block;
position: relative;
top: -150px;
visibility: hidden;
}
your example with slight tweak
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 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;
}