Specific posts on my Tumblr page keep bleeding into to the theme background. It is only happening with posts that include both images and text, however not with each one of them. I've tried everything I could to fix it but it has only made it worse.
I have also tried changing my overflow tag to hidden from visible but all it does is cut off the overflowed part instead of stopping the overflow.
This is what it looks like:
text overflowing
image overflowing
Here are the codes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Theme by conkersradfurday, massively edited from destroyer's theme
-->
<html>
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#e5e5e5"/>
<meta name="color:center background" content="#ffffff"/>
<meta name="color:post" content="#f9d6b6"/>
<meta name="color:sidebar" content="#ffffff"/>
<meta name="color:interests title" content="#ffffff"/>
<meta name="color:sidebox" content="#ffffff"/>
<meta name="color:sidebox border" content="#6699cc"/>
<meta name="color:sidebox left" content="#B0CFF0"/>
<meta name="color:sidebox right" content="#D3E7FB"/>
<meta name="color:sidebox bold:" content="#39658c"/>
<meta name="color:Orange Text" content="#ff6600"/>
<meta name="color:Orange Background" content="#ffcc99"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:text headers" content="#000000"/>
<meta name="color:bold text" content="#000000"/>
<meta name="color:label background" content="#f4f4f4"/>
<meta name="color:link" content="#003399"/>
<meta name="color:link hover" content="#cc0000"/>
<meta name="color:notes" content="#464646"/>
<meta name="color:notes hover" content="#949494"/>
<meta name="color:nav link" content="#ffffff"/>
<meta name="color:nav link hover" content="#000000"/>
<meta name="color:nav background" content="#6697cf"/>
<meta name="color:header background" content="#003399"/>
<meta name="color:asker background" content="#FF9933"/>
<meta name="text:Sex" content="Female"/>
<meta name="text:Age" content="15 Years Old"/>
<meta name="text:City" content="Hollywood"/>
<meta name="text:Country" content="California"/>
<meta name="text:Music" content=""/>
<meta name="text:Movies" content=""/>
<meta name="text:Tv" content=""/>
<meta name="text:Books" content=""/>
<meta name="text:Heroes" content=""/>
<meta name="text:Headline" content="I'm back<br>on MySpace!"/>
<meta name="text:Background Size" content="25%" />
<meta name="text:Profile Song" content="http://mp3.qqkjkl.com/mp3/18/30336027.mp3" />
<meta name="text:Mood" content="Nostalgic" />
<meta name="text:Status" content="Single"/>
<meta name="text:Orientation" content="Bisexual"/>
<meta name="text:Ethnicity" content="r"/>
<meta name="text:Religion" content=""/>
<meta name="text:Occupation" content=""/>
<meta name="image:Portrait" content=""/>
<meta name="image:Background" content=""/>
<meta name="if:Show Infinite Scroll" content="1" />
<meta name="if:Show Photo Caption" content="1" />
<meta name="font:Header Title" content="'Verdana', Impact, Gadget, sans-serif, Arial, Trebuchet MS, Helvetica, Tahoma, sans-serif" />
<meta name="font:Body" content="'verdana', arial, Trebuchet MS, Helvetica, Tahoma, sans-serif" />
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />
<title>{Title}</title>
<link rel="stylesheet" href="http://static.tumblr.com/usaykzx/o8Bku9w35/reset.css" type="text/css" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
{block:IfShowInfiniteScroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfShowInfiniteScroll}
<style type="text/css">
body{
margin-top:0px;
text-align:justify;
color: {color:Text};
font-family: {font:Body};
font-size: 11px;
line-height: 12px;
background-color:{color:Background};
background-image:url({image:Background});
background-attachment: repeat;
background-position:top left;
background-repeat: repeat;
background-size:{text:Background Size};{text:Background Size}
}
a, a:link, a:visited, a:active{color: {color:link}; text-decoration:none;
font-family: {font:Body};
font-size: 11px; line-height:12px; }
a:hover{color: {color:link hover}; line-height:12px;}
#tumblr_controls{
position:fixed!important;}
b, strong{color: {color:bold text};
font-family: {font:Body};
font-size: 11px; line-height:12px;}
#wtf {
background-color:{color:center background};
margin-top:0px;
width:750px;
overflow: visible;
margin-left: -375px;
left:50%;
position: absolute;
padding-top:10px;
color: {color:Text};
font-family: {font:Body};
font-size: 11px;
line-height: 12px;}
#entry {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#sidebar {
position: absolute;
overflow:hidden;
margin-top: 0px;
margin-left:-364px;
left: 50%;
background-color:{color:sidebar};
width: 304px;
height: auto;
padding: 0px;}
#sidebox {
border-top:20px solid {color:sidebox border};
border-left:2px solid {color:sidebox border};
border-right:2px solid {color:sidebox border};
border-bottom:2px solid {color:sidebox border};
overflow:hidden;
margin-top: 0px;
background-color:{color:sidebox};
width: 300px;
height: auto;
padding: 0px;}
#sidebox b {color:{color:sidebox bold};}
#info {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#notes {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#entry img { max-width:400px;}
p{
margin-top:0px;
margin-bottom:0px;}
#question{
overflow:SHOW;
padding-bottom:3px;
margin-bottom:3px;}
#askr{
display:block;
float:left;
width:33px;
overflow:hidden;
margin-right:3px;}
ul {
list-style: disc;
padding: 4px 0px 6px 20px;}
blockquote{padding:0px; padding-left:5px; margin:5px; border-left:2px solid {color:label background};}
blockquote img{display:block; width:100%;}
blockquote p{padding:0px; margin:0px;}
blockquote blockquote{position:relative; left:6px; margin-top:0px; margin-right:0px; padding-right:0px;}
#bottominfo{
padding:2px 0px 0px 0px;
display:block;}
.answer p{margin:0px;}
.notes img{
width:10px;
position:relative;
top:1px;}
ol.notes, .notes li{
list-style:none;
margin:0px;
padding:0px;}
small {font-size:8px; line-height:8px; letter-spacing:0px;}
big {font-family:arial black; color:{color:text}; font-size:14px;}
.audio {width:100%; background:black; border:0px dotted #D6D6D6;}
a img{border:none;}
.label {
color: {color:bold text};font-weight: bold; line-height:12px;}
.odd {
background-color:{color:label background};}
h1 {
font-size: 12px;
line-height: 12px;
font-family: verdana;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
color:{color:text headers};
text-align: left;
margin:0px;
padding-bottom:1px;}
h2 {
font-size: 16px;
line-height: 16px;
font-family: impact;
font-weight:normal;
text-transform: uppercase;
letter-spacing: -1px;
color:{color:text headers};
text-align:left;}
h3 {
font-size: 18px;
line-height: 20px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
color:{color:text headers};
text-align: left;
margin:0px;
padding-bottom:4px;}
h4 {
font-size: 12px;
line-height: 12px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: capitalize;
letter-spacing: -1px;
color: {color:Orange Text};
text-align: left;
margin:0px;
padding-bottom:4px;}
h5 {
font-size: 12px;
line-height: 12px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: capitalize;
letter-spacing: -1px;
color: {color:interests title};
text-align: left;
margin:0px;}
a.links1 {
text-align:center;
margin-top:6px;
margin-bottom:8px;
color: {color:nav link};
display: inline-block;
text-transform: capitalize;
font-family:arial;
font-weight:normal;
font-size:12px;
padding: 2px;}
a.links1:hover {
color: {color:nav link hover};}
#ask {
font-size:12px;
line-height:12px;
padding:4px;
margin-bottom:4px;}
img.middle {
vertical-align:middle;
margin-bottom:3px;}
#notez {
margin-top: 0px; margin-bottom:4px; width:400px;}
#notez a {
font-family: arial;
font-size: 9px;
line-height: 10px;
letter-spacing:1px;
text-transform: normal;}
table {
border-collapse: separate;
border-spacing: 3px;}
#header1 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;
height: 12px;
background-color:{color:Orange Background};}
#header2 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;}
#header3 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;
border-style: solid;
border-width: 2px;
border-color:#000;}
#myspaceheader {
width:750px;
height:81px;
background-color:{color:header background};
margin-left: auto;
margin-right: auto;}
{CustomCSS}
#navigation {
width:750px;
height:30px;
background-color:{color:nav background};
margin-left: auto;
margin-right: auto;}
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
</head>
<body>
<div id="myspaceheader">
<div align=right><font color="white">Sign Up</font></div>
<div align=center><form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form></div>
<div align=left><img src="http://i.imgur.com/MKqRxyf.png" title="Join the MySpace rebirth!" /></div>
</div>
<div id="navigation">
<center>
Home |
{block:AskEnabled}Ask{/block:AskEnabled} |
Archive|
{block:SubmissionsEnabled}Submit{/block:SubmissionsEnabled}|
{block:HasPages}
{block:Pages}
{Label}
{/block:Pages}
{/block:HasPages}
{block:ifCustomLinkOneTitle}{text:Custom Link One Title}{/block:ifCustomLinkOneTitle} |
{block:ifCustomLinkTwoTitle}{text:Custom Link Two Title}{/block:ifCustomLinkTwoTitle} |
{block:ifCustomLinkThreeTitle}{text:Custom Link Three Title}{/block:ifCustomLinkThreeTitle} |
{block:ifCustomLinkFourTitle}{text:Custom Link Four Title}{/block:ifCustomLinkFourTitle}
</center>
</div>
<div id="wtf">
<div id="sidebar">
<h3>{Title}</h3>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="clear:both;">
<div style="float:left;">
{block:IfPortraitImage}
<img src="{image:Portrait}" width="200">
{/block:IfPortraitImage}
</div>
<div style="float:right;">
<div style="margin-left:8px;">
"{text:Headline}" <br> <br>
{text:Sex} <br>
{text:Age} <br>
{text:City} <br>
{text:Country} <br><br>
<img src="http://media.tumblr.com/tumblr_m2lh9lgwvA1qaxq5z.gif">
</div>
</div>
</div>
</td>
</tr>
</table><br>
Last Login: <script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
//-->
</script>
<br><br>
<b><color="{color:post}">Mood:</color></b> {text:mood}</a>
<br>
View My: <b>Pics</b> | <b>Archive</b>
<br>
<br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>Contact {title}</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="150" align="left"><img src="http://i.imgur.com/J4RAuTM.gif" /></td>
<td width="150"><img src="http://i.imgur.com/UCOmMMp.gif"></a></td>
</tr>
<tr>
<td width="150" align="left"><img src="http://i.imgur.com/dtwze3M.gif" /></td>
<td width="150"><img src="http://i.imgur.com/QYs8aR4.gif"></a></td>
</tr>
</table>
</div><br>
<br>
<br>
<div style="border:1px solid {color:sidebox border}; width:302px;">
<h1>MySpace URL:</h1>
http://{name}.tumblr.com
</div><br>
<br>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="295" height="51">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="mp3={text:Profile Song}&width=295&height=51&buttonwidth=54&sliderwidth=40&skin=http%3A//i.imgur.com/uh9op43.jpg&sliderovercolor=310057&buttoncolor=140014&buttonovercolor=fcfcfc" />
</object>
<config>
<param name="mp3" value="{text:Profile Song}"/>
<param name="width" value="295"/>
<param name="height" value="51"/>
<param name="buttonwidth" value="54"/>
<param name="sliderwidth" value="40"/>
<param name="skin" value="http%3A//i.imgur.com/uh9op43.jpg"/>
<param name="sliderovercolor" value="310057"/>
<param name="buttoncolor" value="140014"/>
<param name="buttonovercolor" value="fcfcfc"/>
</config>
<br><br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>{title}'s interests</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="100" align="left" bgcolor="{color:sidebox left}"><b>Music:</b></td>
<td width="188" bgcolor="{color:sidebox right}">{text:Music}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Movies:</b></td>
<td bgcolor="{color:sidebox right}">{text:Movies}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Television:</b></td>
<td bgcolor="{color:sidebox right}">{text:TV}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Books:</b></td>
<td bgcolor="{color:sidebox right}">{text:Books}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Heroes:</b></td>
<td bgcolor="{color:sidebox right}">{text:Heroes}</td>
</tr>
</table>
</div><br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>{title}'s Details</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="100" align="left" bgcolor="{color:sidebox left}"><b>Status:</b></td>
<td width="188" bgcolor="{color:sidebox right}">{text:Status}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Orientation:</b></td>
<td bgcolor="{color:sidebox right}">{text:Orientation}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Ethnicity:</b></td>
<td bgcolor="{color:sidebox right}">{text:Ethnicity}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Religion:</b></td>
<td bgcolor="{color:sidebox right}">{text:Religion}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Occupation:</b></td>
<td bgcolor="{color:sidebox right}">{text:Occupation}</td>
</tr>
</table>
</div>
</div>
<div id="header3"><br><br><center><b><color="{color:post}"></color><font style="font-size:16px!important;">{title} is in your extended network.</b></center><br><br></font></div>
<div id="header1"><h4>{title}'s Blurbs</h4></div>
<div id="header2">
{block:Description}<h4>About Me:</h4> {Description}<br><br>{/block:Description}
</div>
<div id="header1"><h4>{title}'s Posts</h4></div>
<div class="autopagerize_page_element">
{block:Posts}
<div id="entry">
{block:IndexPage}
<div id="notez">
<h1>{ShortMonth} {DayOfMonth} {Year} {12Hour}:{Minutes} {AmPm}</h1>
{NoteCount} Notes - View Post - Reblog
</div>
{/block:IndexPage}
{block:Text}<h2>{Title}</h2>{Body}{/block:Text}
{block:Photo}
{block:IndexPage}
<center><img src="{PhotoURL-500}" width="400" border="0"></center>
{block:IfShowPhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowPhotoCaption}
{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" width="400" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photo}
{block:Photoset}<center>{block:IndexPage}{Photoset-400}{/block:IndexPage}{block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}</center>{block:PermalinkPage}{/block:PermalinkPage}
{block:IfShowPhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowPhotoCaption}
{/block:Photoset}
{block:Quote}<h2>"{Quote}"</h2>{block:Source}{Source}{/block:Source}{/block:Quote}
{block:Link}<a href="{URL}" class="link" {Target}><h2>{Name}</h2></a>{block:Description}{Description}{/block:Description}{/block:Link}
{block:Chat}
{block:Title}{Title}{/block:Title}
{block:Lines}
{block:Label}
<div class="{Alt}"><span class="label"><strong>{Label}</strong></span>
<span class="line">{Line}</span></div>
{/block:Label}
{/block:Lines}
{/block:Chat}
{block:Video}<center>{block:IndexPage}<div id="video">{Video-400}</div>{block:IfNotHidePhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfNotHidePhotoCaption}{/block:IndexPage}<img src="http://i.imgur.com/hR6o8o2.png"/>
{block:PermalinkPage}<div id="video">{Video-400}</div>{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}</center>
{/block:Video}
{block:Audio}
<center><div class="audio">{AudioPlayerBlack}</div></center>
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}
{block:Answer}
<table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:30px;padding-left:30px;padding-top:10px;padding-bottom:30px" bgcolor={color:asker background}><b>{Asker}</b><br><br><img src="{AskerPortraitURL-96}"></td>
<td style="vertical-align:top;"><strong></strong><br>{Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}
</div>
{block:PermalinkPage}
{block:Date}
<div id="info"><div id="bottominfo">
Posted: {ShortDayOfWeek} {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes}{AmPm}{block:RebloggedFrom}<br>Originally posted by {ReblogRootName}.{/block:RebloggedFrom}
{block:Photo}{block:HighRes}<br>HighRes: view{/block:HighRes}{/block:Photo}
{block:Answer}<BR>Ask: {AskLabel}{/block:Answer}
{block:Audio}<BR>Plays: {FormattedPlayCount}{block:ExternalAudio}<BR>Download: here.{/block:ExternalAudio}{/block:Audio}
{block:HasTags}<BR>Tagged: {block:Tags}{Tag} {/block:Tags}{/block:HasTags}{block:NoteCount}<BR>Notes: {NoteCount}{/block:NoteCount}
</div></div>
{/block:Date}
{/block:PermalinkPage}
{block:PostNotes}
<div id="notes">{PostNotes}</div>
{/block:PostNotes}
{/block:Posts}
</div> </*Infinite Scroll*/>
{block:Pagination}
<div id="entry">
<center> <table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200">
{block:PreviousPage}<div align="left">◄ Previous</div>{/block:PreviousPage}
</td>
<td width="200">{block:NextPage}<div align="right">Next ►</div>{/block:NextPage}
</td>
</tr>
</table></center>
</div>
{/block:Pagination}
<center><img src="http://media.tumblr.com/tumblr_m2lokcAnTG1qaxq5z.png" width="750" height="2"><br></center>
<center><small>©2003-<script type="text/javascript">
<!--
var year = currentTime.getFullYear()
document.write(year)
//-->
</script> MySpace.com. Theme by conkersradfurday. All Rights Reserved. </small></center>
<style type="text/css">
ul#likes {
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
li.like_post {
/* Should match the width specified in the Likes tag */
width: 150px;
padding: 0 40px 0 0;
float: left;
}
li.like_post img {
max-width: 100%;
}
li.like_post blockquote {
margin: 0;
padding: 0 0 0 10px;
border-left: 1px solid #eee;
}
li.like_post ol,
li.like_post ul {
margin: 0 0 0 15px;
padding: 0;
}
li.like_post .like_link a {
font-weight: bold;
}
li.like_post .like_title {
font-weight: bold;
}
li.like_post .post_info_bottom {
margin: 10px 0 0 0;
display: block !important;
}
</style>
</head>
</html>
Related
I have been working on a home page, and everything was going smoothly. However, whenever I send it to someone else, the CSS doesn't work properly. When I examine the code on their laptop it appears it isn't being registered as code, but rather as plain text. I have included my entire code just in case it is something wrong with another part. For context I have saved it as a .html document on Firefox. There isn't any error when it is loaded, the CSS just doesn't work. I am very new to HTML and CSS so it may be something very simple.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style type="text/css">
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {
font-size: 20px;
font-color: black;
font-family: montserrat;
text-decoration: none;
position: absolute;
margin-top: 360px;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: lightgray;
padding: 27.5px;
border-radius: 0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
.navbar {
text-decoration: none;
padding-left: 30px;
padding-right: 30px;
font-family: montserrat;
font-weight: 150;
}
body {
background-image: url("file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/The%20Lost%20Dogs%20Home.png");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: 200px, 600px;
}
a:hover~.name {
color: #327da8;
border-color: #327da8;
}
img {
border: 10px solid black;
}
</style>
</head>
<body>
<nav>
<table style="margin-left:190px;margin-right:auto; margin-top:45px; font-size:20px;">
<tr>
<th><a class="navbar" href="PupLove.html">Home</a></th>
<th><a class="navbar" href="PupLoveDonate.html">Donate</a></th>
<th><a class="navbar" href="PupLoveCare.html">How to take care of a dog</a></th>
<th><a class="navbar" href="PupLoveContacts&FAQ's.html">Contacts and FAQ's</a></th>
<th><a class="navbar" href="PupLoveBlog.html">Blog</a></th>
</nav>
</tr>
</table>
<div>
<img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/goldenretrieversf1.jpg" height="300" width="200">
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveNala.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a></div>
<div>
<img style="position:absolute; margin-top:60px; margin-left:350px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/greatdanesf5.jpg" height="300" width="200">
<a class="name" style="margin-left:350px; padding:36.5px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBillie.html">Billie <br><br> Breed: Great <br> Dane <br><br> Sex: Male</a></div>
<div>
<img style="position:absolute; margin-top:60px; margin-left:650px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-AB/australiancattledogsf1.jpg" height="300" width="200">
<a class="name" style="margin-left:650px; padding:41px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBendi.html">Bendi <br><br> Breed: Blue <br> Heeler <br><br> Sex: Male</a></div>
<div>
<img style="position:absolute; margin-top:60px; margin-left:950px; border-radius:15px 15px 0px 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bearded_collie_and_a_rope.jpg/640px-Bearded_collie_and_a_rope.jpg" height="300" width="200">
<a class="name" style="margin-left:950px; padding:21px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveRufus.html"><br>Rufus <br><br> Breed: Bearded <br> Collie <br><br> Sex: Male<br>ㅤ</a>
</div>
</body>
</html>
I don't know if it's the reason but you have tags that are badly closed,
I have corrected your code saying the standards:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {
font-size:20px;
color:black;
font-family:montserrat;
text-decoration:none; position:absolute;
margin-top: 360px; text-align:left; border-width:1px;
border-style:solid; border-color:lightgray;
padding: 27.5px;
border-radius:0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
.navbar {
text-decoration:none; padding-left:30px; padding-right:30px; font-family:montserrat; font-weight:150;
}
body {
background-image: url("file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/The%20Lost%20Dogs%20Home.png");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: 200px, 600px;
}
a:hover ~ .name {
color: #327da8;
border-color: #327da8;
}
img {
border:10px solid black;
}
</style>
</head>
<body>
<nav>
<table style="margin-left:190px;margin-right:auto; margin-top:45px; font-size:20px;">
<tr>
<th><a class="navbar" href="PupLove.html">Home</a></th>
<th><a class="navbar" href="PupLoveDonate.html">Donate</a></th>
<th><a class="navbar" href="PupLoveCare.html">How to take care of a dog</a></th>
<th><a class="navbar" href="PupLoveContacts&FAQ's.html">Contacts and FAQ's</a></th>
<th><a class="navbar" href="PupLoveBlog.html">Blog</a></th>
</tr>
</table>
</nav>
<div><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/goldenretrieversf1.jpg" height="300" width="200">
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveNala.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a></div>
<div><img style="position:absolute; margin-top:60px; margin-left:350px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/greatdanesf5.jpg" height="300" width="200">
<a class="name" style="margin-left:350px; padding:36.5px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBillie.html">Billie <br><br> Breed: Great <br> Dane <br><br> Sex: Male</a></div>
<div><img style="position:absolute; margin-top:60px; margin-left:650px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-AB/australiancattledogsf1.jpg" height="300" width="200">
<a class="name" style="margin-left:650px; padding:41px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBendi.html">Bendi <br><br> Breed: Blue <br> Heeler <br><br> Sex: Male</a></div>
<div><img style="position:absolute; margin-top:60px; margin-left:950px; border-radius:15px 15px 0px 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bearded_collie_and_a_rope.jpg/640px-Bearded_collie_and_a_rope.jpg" height="300" width="200">
<a class="name" style="margin-left:950px; padding:21px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveRufus.html"><br>Rufus <br><br> Breed: Bearded <br> Collie <br><br> Sex: Male<br>ㅤ</a></div>
</body>
</html>
Recently I have the problem that when I click the download button it always open not Download the File(RAR)
Here's the Web hope you can help me guys fixing this problem cause I'm good at making the button or a function
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding:0:;
margin:0;
background-color:#f4f4f4;
}
/* Global */
.container{
width:80%;
margin:auto;
overflow:hidden;
}
header ul{
margin:0;
padding:0;
}
.button_1{
height: 38px;
background: #1b3f8b;
border: none;
padding-left: 20px;
padding-right: 20px;
color: white;
}
.dark{
padding: 15px;
background:#35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
h6{
text-align:right;
}
/* Header */
header{
background:#B3E8FF;
color:#FFFFFF;
padding-top:30px;
min-height:70px;
padding-bottom:0;
border-bottom:#80D9FF 3px solid;
}
header a{
color:white;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin-top:0;
margin-bottom:10px;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight , header .current a{
color:#1b3f8b;
font-weight:bold;
}
header a:hover{
color:#cccccc;
color-weight:bold;
}
/*showcase*/
#showcase{
min-height: 650px;
background: url('../img/showcase.png') no-repeat 0 -5px;
text-align: center;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
color: #ffffff;
}
#showcase h1{
margin-top: 330px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p{
font-size: 20px;
}
/*newsletter*/
#newsletter{
padding: 15px;
background: #B3E8FF;
color: #ffffff;
}
#newsletter h1{
float: left;
}
#newsletter form{
float: right;
margin-top: 15px;
}
#newsletter input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
}
/*boxes*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
#boxes .box img{
width: 200px;
}
#boxes h1{
text-align: center;
}
/*sidebar*/
aside#sidebar{
float:right;
width:30%;
margin-top:10px;
}
/*main-col*/
article#main-col{
float:left;
width:65%;
}
footer{
padding: 20px;
margin-top: 20px;
color: #1b3f8b;
background-color:#B3E8FF;
text-align: center;
font-size: 20px;
}
/*Repaint Gallery*/
.gallery img{
width:350px;
height:140px;
}
th{
font-size: 2em;
background-color:#35424a;
color:white;
}
td{
padding:25px;
text-align: center;
}
#repaintgallery table{
width: 100%;
margin:auto;
height: 100%;
}
/*Download Button*/
.download{
width:120px;
height:30px;
font-size:20px;
text-align:center;
background:#35424a;
border:none;
color:white;
display: inline-block;
text-decoration: none;
}
/*Media Queries*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#newsletter h1,
#boxes .box,
article#main-col,
aside#sidebar,
#newsletter form, #repaintgallery table{
float:none;
text-align:center;
width: 100%;
}
header{
padding-bottom: 20px;
}
#showcase h1{
margin-top: 40px;
}
#newsletter form button{
display:block;
width: 510px;
margin:auto;
}
#newsletter form input[type="email"]{
width:500px;
margin-bottom:5px;
}
#repaintgallery img{
width:170px;
height:85px;
margin:auto;
}
#repaintgallery table{
display: block;
}
.download {
width:60px;
height:25px;
font-size:10px;
text-align:center;
background:#35424a;
border:none;
color:white;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="kvxETPFss98nnIOWhaBbkHlKLAr3--nT5321XnFUVUg" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="FSX Repaints">
<meta name="keywords" content="fsx, repaints, project airbus, just flight, pmdg, captainsim, premier airraft design, pad, airlines, project opensky, posky, tom's ruth">
<meta name="author" content="Raven Lescano">
<title>Repaints | Raven's Hangar</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!-- favicon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon/favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">RAVEN'S</span> HANGAR</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">Repaints</li>
<li>About Us</li>
</ul>
</nav>
</header>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form>
<input type="email" placeholder="Enter Email....." ="">
<button type="submit" class="button_1">Subscibe</button>
</form>
</div>
</section>
<section id="repaintgallery">
<div class="gallery">
<table>
<tr>
<th colspan="3">Repaints</th>
</tr>
<tr>
<td><img src="img/template7.png" alt=""><a class="download" href="repaints/tnc.rar" download>Download</a></td>
<td><img src="img/template9.png" alt=""><a class="download" href="repaints/agn.rar" download>Download</a></td>
<td><img src="img/template10.png" alt=""><a class="download" href="repaints/cen.rar" download>Download</a></td>
</tr>
<tr>
<td><img src="img/template3.png" alt=""><a class="download" href="repaints/ph.rar" download>Download</a></td>
<td><img src="img/template11.png" alt=""><a class="download" href="repaints/usao.rar" download>Download</a></td>
<td><img src="img/template17.png" alt=""><a class="download" href="repaints/ma.rar" download="ma.rar">Download</a></td>
</tr>
<tr>
<td><img src="img/template15.png" alt=""><a class="download" href="repaints/PH75th.rar" download>Download</a></td>
<td><img src="img/template16.png" alt=""><a class="download" href="repaints/CEBN.rar" download>Download</a></td>
</tr>
<tr>
<td><img src="img/template12.png" alt=""><a class="download" href="repaints/bin.rar" download>Download</a></td>
<td><img src="img/template13.png" alt=""><a class="download" href="repaints/as.rar" download>Download</a></td>
<td><img src="img/template14.png" alt=""><a class="download" href="repaints/001.rar" download>Download</a></td>
</tr>
</table>
</div>
</section>
<footer>
<p>Raven's Hangar, Copyright © 2017</p>
</footer>
</body>
</head>
</html>
IMG
[https://i.stack.imgur.com/TGoFg.jpg][1]
Try Here
[https://ravens-hangar.tk/repaints.html][1]
If you use html tag for link. just add a extra attribute download with it.
thats mean you can write
<a href="sample.jpg" download></a>
now file will prompt to download file with name sample.jpg
if you give value to download like;
then file will prompt to download with new name demo.jpg
try it and inform me about your problem.
I'm trying to setup a new email template in the Marketo editor (v.2) and make modules.
However, when I go to save my template in the editor it tells me that my modules are invalid and doesn't save. Even when I scale the template down to basically nothing, once I add any content inside the container module, it doesn't work.
Here's my code — can anyone tell me how to set the container module properly and why it's throwing an error when I try to save? I've followed the documentation (even though it's not well done) and everything seems like it should be fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions -->
<meta class="mktoColor" id="spacerBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoNumber" id="spacerSpacer" mktoname="Height" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="freeImageBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoColor" id="freeTextBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoNumber" id="freeTextSpacer" mktoname="Space Before Text" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="freeTextSpacer2" mktoname="Space After Text" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="footerBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoNumber" id="footerSpacer" mktoname="Space Before Text" default="10" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="footerSpacer2" mktoname="Space After Text" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="ctaBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoColor" id="ctaButtonBackgroundColor" mktoname="Button Background Color" default="#333333" />
<meta class="mktoColor" id="ctaBorderColor" mktoname="Button Border Color" default="#333" />
<meta class="mktoNumber" id="ctaBorderSize" mktoname="Button Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="ctaSpacer" mktoname="Space Before Button" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="ctaSpacer2" mktoname="Space After Button" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="ctaLink" mktoname="Button Link" default="#" />
<meta class="mktoString" id="ctaLinkText" mktoname="Button Label" default="CALL TO ACTION" />
<meta class="mktoColor" id="hrBackgroundColor" mktoname="Background" default="#ffffff" />
<meta class="mktoColor" id="hrBorderColor" mktoname="Border Color" default="" />
<meta class="mktoNumber" id="hrBorderSize" mktoname="Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoColor" id="twoArticlesBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoColor" id="twoArticlesButtonBackgroundColor" mktoname="Left Column Button Background Color" default="#333" />
<meta class="mktoColor" id="twoArticlesButtonBackgroundColor2" mktoname="Right Column Button Background Color" default="#333" />
<meta class="mktoColor" id="twoArticlesBorderColor" mktoname="Left Column Button Border Color" default="#333" />
<meta class="mktoNumber" id="twoArticlesBorderSize" mktoname="Left Column Button Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoColor" id="twoArticlesBorderColor2" mktoname="Right Column Button Border Color" default="#333" />
<meta class="mktoNumber" id="twoArticlesBorderSize2" mktoname="Right Column Button Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer" mktoname="Space Over Columns" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer2" mktoname="Left Column Space Below Image" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer3" mktoname="Left Column Space Below Title" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer4" mktoname="Left Column Space Below Text" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer5" mktoname="Right Column Space Below Image" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer6" mktoname="Right Column Space Below Title" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer7" mktoname="Right Column Space Below Text" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer8" mktoname="Space Below Columns" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="twoArticlesLink" mktoname="Left Button Link" default="#" />
<meta class="mktoString" id="twoArticlesLinkText" mktoname="Left Button Label" default="CALL TO ACTION" />
<meta class="mktoString" id="twoArticlesLink2" mktoname="Right Button Link" default="#" />
<meta class="mktoString" id="twoArticlesLinkText2" mktoname="Right Button Label" default="CALL TO ACTION" />
<!-- Other Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css" />
<!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<style>
/*startcommon*/
#media only screen and (max-width: 800px) {
table#boxing{
width: 100% !important;
}
}
/*endcommon*/
</style>
<!--[if gte mso 9]>
<style type="text/css">
#hero .table3-3{
width: 100% !important;
}
</style>
<![endif]-->
<style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
.appleBody a {
color: #000;
text-decoration: none;
}
.appleFooter a {
color: #000;
text-decoration: none;
}
#-ms-viewport {
width: device-width;
}
</style>
<style media="all">
#media only screen and (max-width: 640px) {
/*starttablet*/
.m_video .mktoVideo tr:first-child img{
width: 100% !important;
height: auto!important;
max-height:auto!important;
min-height:auto!important;
}
body {
width: auto !important;
}
table[class="table600"] {
width: 450px !important;
}
table[class="table-inner"] {
width: 86% !important;
}
table[class="table1-2"] {
width: 47% !important;
clear: both;
}
table[class="table1-3"] {
width: 29.4% !important;
}
table[class="table1-4"] {
width: 100% !important;
text-align: left !important;
}
table[class="table2-3"] {
width: 64% !important;
text-align: center !important;
}
table[class="table3-3"] {
width: 100% !important;
text-align: center !important;
clear: both;
}
table[class="footer-logo"] {
width: 10% !important;
text-align: right !important;
}
td[class="outer"] {
min-width: 0 !important;
}
td[class="stack"] {
padding-bottom: 40px !important;
}
.stack-tablet {
padding-bottom: 20px !important;
overflow: visible !important;
float: none !important;
mso-hide: none !important;
display: block !important;
}
img[class="mobile-img"] {
width: 100% !important;
height: auto !important;
}
td[class="center-tablet"] {
text-align: center !important;
}
td[class="hide-tablet"] {
display: none !important;
}
table[class="footer-column"] {
width: 47% !important;
text-align: left !important;
}
.m_two-articles .table1-2 {
width: 100% !important;
}
.m_two-articles .photo img {
width: 100% !important;
}
.m_two-articles .stack-tablet td {
height: 60px !important;
}
.m_free-image img {
width: 450px !important;
}
/*endtablet*/
}
#media only screen and (max-width: 479px) {
/*startmobile*/
body {
width: auto !important;
}
table[class="table600"] {
width: 290px !important;
}
table[class="table-inner"] {
width: 80% !important;
float: none !important;
}
table[class="table1-2"] {
width: 100% !important;
clear: both;
}
table[class="table1-3"] {
width: 100% !important;
clear: both;
}
table[class="table1-4"] {
width: 100% !important;
text-align: center !important;
}
table[class="table2-3"] {
width: 100% !important;
text-align: center !important;
}
table[class="table3-3"] {
width: 100% !important;
text-align: center !important;
clear: both;
}
table[class="footer-logo"] {
width: 60% !important;
text-align: center !important;
}
td[class="outer"] {
min-width: 0 !important;
}
td[class="td3-1"] {
width: 60% !important;
text-align: center !important;
}
.stack-smartphone {
padding-bottom: 20px !important;
overflow: visible !important;
float: none !important;
display: block !important;
mso-hide: none !important;
}
td[class="center-smartphone"] {
text-align: center !important;
}
img[class="mobile-img"] {
width: 100% !important;
}
td[class="center-tablet"] {
text-align: center !important;
}
td[class="hide-smartphone"] {
display: none !important;
}
table[class="footer-column"] {
width: 100% !important;
text-align: center !important;
}
.m_free-image img {
width: 290px !important;
}
.m_hr .table-inner {
width: 100% !important;
}
/*endmobile*/
}
</style>
</head>
<body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;">
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
</div>
<!-- Outer table START -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 600px; border-collapse: collapse; background-color: #eeeeee;">
<table width="800" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="mktoContainer" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table width="630" border="0" cellpadding="0" cellspacing="0" align="center" class="main-nav-breakpoints" style="margin:0 auto;">
<tr>
<td width="100%" bgcolor="#F2F8FB">
<!-- Nav -->
<table border="0" height="100" cellpadding="0" cellspacing="0" class="main-nav-breakpoints">
<tr>
<td style="margin:0; padding:0px 0px 0px 20px;">
<img src="images/logo#2x.png" width="164" height="54" alt="" border="0" align="left" class="logo" style="margin:0; padding:0;"/>
</td>
<td align="right" style="width: 75%; padding: 0; font-size: 13px; color: #ffffff; font-weight: normal; text-align: right; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: bottom; font-style:normal;padding:0px 20px 24px 0px;">
one
two
three
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Outer Table END -->
</body>
</html>
I don't see any modules defined the code you provided. Which sections do you want to be modules?
If your container is a td then all the tables within that TD should be your modules. And ALL your tables(modules) within that container td need to be marked as a module table by adding class="mktoModule"
According to Marketo's documentation, the type of element's that can have the class "mktoContainer" is a table, tbody, thead, tfoot, or td, and only modules can be inside those elements. If there's anything else present, the container will be considered invalid.
In your HTML, you've defined a td element as the container, but you haven't defined any actual modules within that container. To the table immediately inside your container, you should add the class "mktoModule", a unique id, and the mktoName attribute with a value. Example of changes are below, specifically noting the changes on line 2:
<td class="mktoContainer" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table id="module_navigation" mktoName="Navigation" width="630" border="0" cellpadding="0" cellspacing="0" align="center" class="main-nav-breakpoints mktoModule" style="margin:0 auto;">
<tr>
<td width="100%" bgcolor="#F2F8FB">
<!-- Nav -->
<table border="0" height="100" cellpadding="0" cellspacing="0" class="main-nav-breakpoints">
<tr>
<td style="margin:0; padding:0px 0px 0px 20px;">
<img src="images/logo#2x.png" width="164" height="54" alt="" border="0" align="left" class="logo" style="margin:0; padding:0;"/>
</td>
<td align="right" style="width: 75%; padding: 0; font-size: 13px; color: #ffffff; font-weight: normal; text-align: right; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: bottom; font-style:normal;padding:0px 20px 24px 0px;">
one
two
three
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
</td>
Optionally, you can include the mktoActive and mktoAddByDefault attributes with boolean values to your module.
I am trying out a guide from YouTube, but I can't get the right_aside and left_aside elements to show on my screen. I have been looking for hours now, and I can't find the problem. Did I miss something?
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my websitebeta</title>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="indexStyle.css" />
</head>
<body>
<header id="main_header">
<div id="second_header"></div>
</header>
<menu id="main_menu"></menu>
<div id="main_wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="180">
<aside id="left_aside"></aside>
</td>
<td>
<section id="main_content"></section>
</td>
<td valign="top" width="180">
<aside id="right_aside"></aside>
</td>
</tr>
</table>
</div>
<footer id="main_footer"></footer>
</body>
</html>
This is my CSS:
*{
padding: 0px;
margin: 0px;
}
body{
color:#000;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
background: #FFF;
}
#main_header{
width:100%;
height:100px;
background: #F90;
}
#second_header{
min-width:960px;
height:60px;
padding:20px;
margin:0px auto 0px;
}
#main_menu{
width: 100%;
height: 40px;
background: #09F;
}
#main_wrapper{
min-width:1000px;
margin-top: 0px;
margin-bottom: 0px;
}
#left_aside{
width: 180px;
min-height:700;
background: #9f0;
}
#main_content{
margin:0px 20px 0px;
min-height:700;
}
#right_aside{
width: 180px;
min-height:700;
background: #f00;
}
#main_footer{
width: 100%;
height: 50px;
background: #09F;
margin: 0px;
}
It looks like you've forgotten the px after your min-height in both the left and right asides.
It should look like: min-height:700px;
Good luck!
I am working on my site in Firefox 3.0.9 (and am very green with CSS) and it looks fair so far. However I have a floating horizontal nav bar at the top that looks like is stepping down. Here is what I attempted so far:
1) I have adjusted the margins, zeroed the padding and changed the width of the background image - all to no effect.
2) I tried to create a IE7 folder and point the browser their with a different stylesheet - no effect.
3) I tried to use IE7.js to solve the issue - no effect.
IE is driving me batty! Any thoughts? Here is my CSS & HTML (no laughing ;-) )
Thanks!
/---my css---/
#body {
margin: 0px 0px 20px 0px;
text-align: center;
background: #450000 url(images/greenstrip.jpg) repeat-x right top;
}
#maincontainer {
width: 720px;
border-width: 8px;
border-color: #fff;
border-style: solid;
position: absolute;
margin-left: 50%;
left: -360px;
margin-right: auto;
}
#box p {
position: absolute;
color: #fffceb;
width: 450px;
margin-top: 275px;
margin-left: 16px;
background: #373635;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
text-align: left;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
}
#lowerbox p {
position: absolute;
color: #fffceb;
width: 450px;
background: #373635;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
width: 450px;
margin-top: 433px;
margin-left: 16px;
}
#featured p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 128px;
background: none;
font-size: small;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
}
#customize p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 420px;
background: none;
font-size: small;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
}
.name {
font-weight: bold;
font-style: italic;
color: #bec783;
}
ul {
margin: 0px;
width: 680px;
line-height: 0em;
list-style: none;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
float: left;
background: url(images/button.gif);
}
ul a {
display: block;
padding: 0 1.2em;
line-height: 2.2em;
text-decoration: none;
color: #fff;
float: left;
margin-left: 6px;
margin-right: 0;
}
ul li {
float: left;
width: auto;
}
ul a:hover {
color:#f26214;
}
ul a:visited {
text-decoration: none;
}
#textpad ul {
position:absolute;
width:100px;
margin-top: 335px;
margin-left: 481px;
background: none;
text-decoration: none;
}
.promise a {
display: block;
color:#000;
line-height: 1em;
font-size: 30px;
font-family: "freestyle script";
width:150px;
}
.promise a:visited {
text-decoration: none;
}
#fet a:link, #fet a:visited {
text-decoration:none;
color: #000;
}
#fet a:hover {
color:#f26214;
}
<!---HTML--->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Core 4 Innovative: Website Solutions For Your Small Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content=" core 4,web,webpage developer,design,web designer, freelance,low cost" />
<meta name="robots" content="index,follow" />
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body id="body">
<div id="maincontainer">
<table id="Table_01" width="720" height="961" border="0" cellpadding="0" cellspacing="0">
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Our Process</li>
<li>Our Services</li>
<li>Contact Us</li>
</ul>
<div id="textpad">
<ul>
<li class="promise"><a href="#">Affordable Web Hosting Starting at $9.99 per month!<a></li>
</ul>
<div id="box">
<p><span class="name">Core 4 Innovative</span> puts your online success within reach. Using our affordable
website solutions, unique development process and standardized
methods for design you can be sure to recieve a customized product that adds value to your business!</p>
</div>
<div id="lowerbox">
<p><span class="name">We Serve Every Major Industry:</span></br>
Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services</p>
</div>
<div id="featured">
<p><span id="fet">Our Featured Client</span></p>
</div>
<div id="customize">
<p>Customize Your website</p>
</div>
<tr>
<td colspan="3">
<img src="images/top.jpg" width="720" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="images/logo.jpg" width="258" height="137" alt=""></td>
<td colspan="2">
<img src="images/apple_graphic.jpg" width="462" height="137" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/topdivider.jpg" width="720" height="48" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/topdivider-06.jpg" width="502" height="3" alt=""></td>
<td rowspan="2">
<img src="images/notepad.jpg" width="218" height="305" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/getaquotebox.jpg" width="502" height="302" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/roundboxes.jpg" width="720" height="370" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/footer.jpg" width="720" height="88" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="258" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="244" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="218" height="1" alt=""></td>
</tr>
</table>
</div>
</body>
</html>
You have forgotten to put your nav in a <td> and a <tr>. Once you start a <table>, everything after that tag, that is not a "table tag" (such as <th> needs to be in a <tr>, and a <td>. For more information on this see: http://www.w3schools.com/html/html_tables.asp
To fix this, simply put your ul in a <tr> and <td>
<tr><td>
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Our Process</li>
<li>Our Services</li>
<li>Contact Us</li>
</ul>
</td>
</tr>
Also, any other html elements on the page need to be in a <tr> or <caption>) and a <td> tag (such as your div's "box" and "lowerbox"; the divs need to be closed before you start another td).
If I were you, I would get rid of all of the table elements all together. If you really want to use a table for layout of your content, then use it only in the content area. You do not need to start your table with all your images until you get to the content area.
Also, to avoid future css headaches, always begin your css file with a css reset. This will help you on your way!
The css that you are using to style your nav is fine. For all the bad rap that IE get (totally deserved), the errors are sometimes due to coder negligence (ie you forget to close your tags). Most browsers are nice and ignore your negligence, but IE often does not clean up your missing tag mess.
I offer a simple page structure to place your code into.
<html>
<head>
<title></title>
</head>
<body>
<div id="header">
<!-- your <ul> nav -->
</div>
<div id="content">
<!-- your table with images (if you really want to use a table! -->
</div>
<div id="footer">
<!-- your footer info -->
</div>
</body>
</html>
Well, getting rid of the width: 680px in the ul fixes it... not sure what the specific IE bug is that's causing it, but that width seems to be being applied to the last item in the list rather than the list as a whole. Use a poor-man's firebug by putting a border in your ul li (border: solid 1px #f00;) style to see it.
Perhaps someone else can provide more detailed info into the why...