I have a website, and I have a problem that text doesn't display correctly. It varies, I think according to screen resolution, but I have no idea why.
Any idea why is this happening?
http://jsfiddle.net/948DD/ here is the source code
<body>
<div id="navwrap">
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<div id="contentwrap">
<div id="welcome" align="center">
<table>
<tr id="tr01">
<td id="td01">
<p id="p01">Hi.</p>
<p id="p02">welcome to the webpage of</p>
<p id="p03">NOT!fy</p>
<p id="p04">the best solution against annoying notifications</p>
</td>
<td id="td02"><img src="img/notify_big_icon.png"/></td>
</tr>
</table>
</div>
<div id="divider" align="center">
<img src="img/divider_with_arrow.png"alt="divider" id="dividerpng"/>
</div>
<div id="featureset_chrome" align="center">
<table>
<tr id="chrometr">
<td id="chrometd01"><img src="img/featureset_chrome.png"/>
</td>
<td id="chrometd02">
<p id="chromep01">feature set</p>
<p id="chromep02">- a world first solution to get rid of annoying notifications</p>
<p id="chromep03">- you just need a Google Chrome extension and our app installed on your mobile device and you are good to go</p>
<p id="chromep04">behind the scenes</p>
<p id="chromep05">the Chrome extension watches which sites you are currently viewing and mutes the matching applications on your phone</p>
</td>
</tr>
</table>
</div>
<div id="divider2" align="center">
<img src="img/divider_points.png"alt="divider" id="dividerpointspng"/>
</div>
<div id="per_app_muting" align="center">
<table>
<tr id="perapptr">
<td id="perapptd01">
<p id="perapp_p01">per app muting</p>
<p id="perapp_p02">- forget the annoying notifications (e.g.: game notifications) </p>
<p id="perapp_p03">- with our sleek UI you can easily pick the applications which you rather want to be muted</p>
</td>
<td id="perapptd02"><img src="img/per_app_muting.png"/>
</td>
</tr>
</table>
</div>
<div id="divider3" align="center">
<img src="img/divider_points.png"alt="divider" id="dividerpointspng"/>
</div>
<div id="quiet_hours" align="center">
<table>
<tr id="qhtr">
<td id="qhtd01"><img src="img/quiet_hours.png"/>
</td>
<td id="qhtd02">
<p id="qhp01">quiet hours</p>
<p id="qhp02">- set your cycle to turn on silent mode for your smartphone in specific time intervallum </p>
<p id="qhp03">- no more awkward moments because of your ringing phone</p>
<div id="whoareweclick"></div>
</td>
</tr>
</table>
</div>
<div id="divider4" align="center">
<img src="img/divider.png"alt="divider" id="dividerpng"/>
</div>
<div id="whoarewe" align="center">
<p id="whop1">Who are we? </p>
<p id="whop2">Two passionate and determined boy who believe that they can change the way how the Android notification system works.</p>
<p id="whop3">We live in Hungary and attend university in Budapest.</p>
</div>
<div id="whopics" align="center">
<table>
<tr id="whotr">
<td id="whotd01"><img src="img/kerdojel.png"/>
<p id="name"> bendegúz </p>
<p id="descr"> 18 yrs <br />
our spokesman <br />
also good at: <br />
html, css <br />
</p>
</td>
<td id="whotd02"><img src="img/kristof.png"/>
<p id="name"> kristóf </p>
<p id="descr"> 19 yrs <br />
owner of the idea <br />
responsible for: <br />
design <br />
</p>
</td>
</tr>
</table>
</div>
<div id="whopics2" align="center">
<table>
<tr id="whotr">
<td id="whotd01"><img src="img/kerdojel.png"/>
<p id="name"> X Y </p>
<p id="descr"> we are looking for an android developer, if you are brave enough to join our startup, then head over to "Contact us" section
</p>
</td>
</tr>
</table>
</div>
<div id="divider5" align="center">
<img src="img/divider.png"alt="divider" id="dividerpng"/>
</div>
<div id="indiegogo" align="center">
<p id="indiep1">Indiegogo </p>
<p id="indiep2">As we are students, we don't own a big amout of equity.</p>
<p id="indiep3">That is why we decided to crowdfund our idea at Indiegogo.</p>
<p id="indiep4">We find it the best way to get noticed and be able to get funded.</p>
<p id="indiep5">Soon a pitch video will be released.</p>
<p id="indiep6">our state at the moment:</p>
<p id="ourstate"><img src="img/ourstate.png"/></p>
</div>
</div>
<footer id="footer">
<p>Copyright: NOT!fy 2014, development and design by: Kristóf Dombi, Máté Bendegúz Kovács</p>
</footer>
#charset "utf-8";
/* CSS Document */
#navwrap {
z-index:10;
}
#contentwrap {
padding-top:92px;
z-index:5;
}
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
width:100%;
position:fixed;
top:0;
left:0;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
margin-bottom:
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
}
#welcome {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
#tr01 {
height:300px;
}
#td01 {
text-align:left;
vertical-align: top;
}
#td02 {
text-align:right;
}
#td02 img {
width:200px;
margin-left: 110px;
margin-top: 10px;
}
#p01 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto, thin;
font-size:60px;
font-weight:300;
margin-top: 30px;
}
#p02 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto;
font-size:30px;
font-weight:300;
}
#p03 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto condensed;
font-weight:400;
font-size:35px;
margin-top:7px;
margin-bottom:7px;
}
#p04 {
text-decoration:none;
color:#3c3c40;
font-family: Roboto;
font-weight:300;
font-size:15px;
}
#featureset_chrome {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#chrometr {
height:450px;
}
#chrometd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#chrometd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#chrometd01 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#chromep01 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#chromep02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#chromep03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#chromep04 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#chromep05 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#per_app_muting {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#perapptr {
height:450px;
}
#perapptd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#perapptd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#perapptd02 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#perapp_p01 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#perapp_p02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#perapp_p03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#quiet_hours {
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}
#qhtr {
height:500px;
}
#qhtd01 {
text-align:left;
vertical-align: top;
width:450px;
}
#qhtd02 {
text-align:right;
margin-left:0px;
width:400px;
}
#qhtd01 img {
width:300px;
margin-left: 50px;
margin-top: 0px;
}
#qhp01 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:35px;
margin-top:10px;
margin-bottom:20px;
text-decoration:underline;
}
#qhp02 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#qhp03 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whoareweclick {
padding-top:200px;
}
#whoarewe{
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:left;
}
#whop1 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#whop2 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whop3 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#whopics {
width:600px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:center;
}
#whotr {
height:250px;
}
#whotd01 {
text-align:center;
vertical-align: top;
width:300px;
}
#whotd02 {
text-align:center;
margin-left:0px;
width:300px;
}
#whotd01 img {
width:200px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
}
#whotd02 img {
width:200px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
}
#name {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:40px;
margin-bottom:5px;
margin-left:auto;
margin-right:auto;
}
#descr {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:25px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
}
#desctd01 {
text-align:center;
vertical-align: top;
width:320px;
}
#desctd02 {
text-align:center;
margin-left:0px;
width:320px;
}
#divider5 {
margin-top:50px;
}
#indiegogo{
width:850px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:right;
}
#indiep1 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:50px;
margin-bottom:20px;
}
#indiep2 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep3 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep4 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep5 {
text-decoration:none;
font-family: Roboto;
color:#3c3c40;
font-weight:100;
font-size:25px;
margin-bottom:10px;
}
#indiep6 {
font-family: Roboto;
color:#3c3c40;
font-weight:300;
font-size:30px;
margin-top:30px;
margin-bottom:30px;
text-decoration:underline;
}
#ourstate {
margin-left:auto;
margin-right:auto;
text-align:center;
}
#ourstate img {
width:600px;
margin-left:auto;
margin-right:auto;
}
#footer {
background-color: #353539;
height:50px;
margin-top:100px;
margin-bottom:0px;
opacity:0.95;
}
#footer p {
color:#d2d2d2;
font-family: Roboto;
font-weight:300;
font-size:17px;
text-align:center;
padding-top:17px;
}
A broad answer to your question:
This is the result of type hinting, anti-aliasing and the rendering quality based upon display. Generally speaking Windows does not anti-alias text to the extent that, Mac OS X does. That means that the type will not be "smoothed" using sub-pixels or surrounding pixels causing the type to look jagged.
This is compounded when a font is not hinted, which is the tedious task of hand picking pixels that will be used in font rendering at each individual size. When this is compounded with the lack of anti-aliasing you may miss actual pieces of your letter forms!
This is further compounded if you are looking at a monitor with a smaller number of pixels.
Try and find a hinted version of your font, try using a larger size, or perhaps using a different font all together.
Related
I just went to a lot of trouble to create a nice looking email using html.
It works for both gmail and yahoo. I just though i'd test on hotmail and outlook.com and it just displays the whole email as the HTML code?!
The html is well formed and appears like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
background-color:white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#outterBox {
position:relative;
width:500px;
height:320px;
background-color:#F0f0f0;
padding:10px;
}
#innerBox {
background-color:white;
width:90%;
height:55%;
margin-top:6px;
margin: 0 auto;
margin-top:24px;
position:relative;
}
#headingBox {
width:100%;
height:18%;
background-color:#f0f0f0;
overflow: hidden;
}
#notiBar {
background-color:#a1a1a1;
width:100%;
height:42px;
line-height:42px;
}
#notiBar > span {
font-size:18px;
color:white;
margin-left:16px;
}
#notiContent {
width:100%;
height:100%;
position:relative;
}
#notiContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:14px;
}
#msgContent {
height:30px;
line-height:30px;
padding:10px;
}
#msgContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:4px;
}
#linkContent {
margin-top:2%;
height:50px;
width:100%;
position:relative;
text-align:center;
}
#siteButton {
display:inline-block;
background-color:#5683CC;
border:none;
color:white;
font-size:16px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:36px;
width:40%;
line-height:36px;
text-align:center;
}
#footer {
height:27%;
width:90%;
padding-top:10%;
}
#footer > span {
color:#878787;
font-size:10px;
}
#unsubscribe {
text-decoration:none;
color:#81a0d3;
font-size:10px;
}
</style>
</head>
<body>
<div id="outterBox">
<div id="headingBox">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox">
<div id="notiContent">
<div id="msgContent">
<span><span id="userName"></span>, new message</span>
</div>
<div id="linkContent">
<a id="siteButton" href="website">Check msgs now</a>
</div>
</div>
</div>
<div id="footer">
<span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
</div>
</div>
</body>
</html>
Is there a trick to getting this working without having to dramatically change my code for microsoft?
Email is not forgiving at all. Every browser, every client could display something different. With microsoft being the absolute worst at rendering expectations. Your best bet is to inline style as much as you can, using tools like: http://foundation.zurb.com/emails/inliner.html
This is a good resource as well, for what elements/attributes to stay away from: https://www.campaignmonitor.com/css/
Also, check out email on Acid. I'm not sure if they are fremium, but you can see how the email looks in every browser/client/device etc...
good luck.
Try to use on top of it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
johhny B, this is salvageable, but as you have figured out by now, Outlook does not work with HTML 5, CSS 3, divs or darn near anything fun.
The biggest thing you need to do is inline css values. Outlook ignores style sheets. It's going to ignore any css like, #msgContent > span.
This is your email with very few values inlined to clean up the look of Outlook slightly.
Good luck.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
background-color:white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#outterBox {
position:relative;
width:500px;
height:320px;
background-color:#F0f0f0;
padding:10px;
}
#innerBox {
background-color:white;
width:90%;
height:55%;
margin-top:6px;
margin: 0 auto;
margin-top:24px;
position:relative;
border: 1px;
}
#headingBox {
width:100%;
height:18%;
background-color:#f0f0f0;
overflow: hidden;
}
#notiBar {
background-color:#a1a1a1;
width:100%;
height:42px;
line-height:42px;
}
#notiBar > span {
font-size:18px;
color:white;
margin-left:16px;
}
#notiContent {
width:100%;
height:100%;
position:relative;
}
#notiContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:14px;
}
#msgContent {
height:30px;
line-height:30px;
padding:10px;
}
#msgContent > span {
font-size:18px;
color:#878787;
margin-top:16px;
margin-bottom:16px;
margin-left:4px;
}
#linkContent {
margin-top:2%;
height:50px;
width:100%;
position:relative;
text-align:center;
}
#siteButton {
display:inline-block;
background-color:#5683CC;
border:none;
color:white;
font-size:16px;
padding-left:10px;
padding-right:10px;
text-decoration:none;
height:36px;
width:40%;
line-height:36px;
text-align:center;
}
#footer {
height:27%;
width:90%;
padding-top:10%;
}
#footer > span {
color:#878787;
font-size:10px;
}
#unsubscribe {
text-decoration:none;
color:#81a0d3;
font-size:10px;
}
</style>
</head>
<body>
<div id="outterBox" style="width: 500px; border: 1px solid;">
<div id="headingBox" style="width: 500px; height:55px; background:#f0f0f0;">
<img src="image location" alt="xx" title="xx" style="display:block"/>
</div>
<div id="innerBox" style="width: 450px;">
<div id="notiContent" style="width: 450px; border: 1px solid;">
<div id="msgContent">
<span><span id="userName"></span>, new message</span>
</div>
<div id="linkContent">
<a id="siteButton" href="website">Check msgs now</a>
</div>
</div>
</div>
<div id="footer">
<span> To unsubscribe from<a id="unsubscribe" href="/"> here</a></span>
</div>
</div>
</body>
</html>
I am having trouble editing links in a div. I would like the link text to be centered vertically inside it's black div. I would also like the box background to change to red on hover...
thanks so much for any assistance!
html:
<div id="footer_subscribe">
<input type="text" class="subscribe" value="Email Address" />
Subscribe
</div>
<div id="footer_facebook">
<img src="http://s26.postimg.org/q5tytjx2t/nav_facebook.jpg" />
Become a Fan
</div>
<div id="footer_youtube">
<img src="http://s26.postimg.org/rywvhvi9h/nav_youtube.jpg" />
Watch Us
</div>
css:
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
}
input.subscribe {
border:2px solid black;
margin:2px;
width:200px;
height:24px;
}
#footer_facebook {
background:#000;
width:155px;
height:35px;
float:left;
padding:0;
margin-left:5px;
}
#facebook_logo {
width:32px;
height:32px;
}
a.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
}
a:link.visited.footer_social {
color:#FFF;
}
a:link.hover.footer_social {
color:#F00;
}
http://jsfiddle.net/4os21tzf/
#footer_subscribe {
background:#000;
width:305px;
height:35px;
float:left;
padding:0;
line-height: 33px;
}
#footer_subscribe:hover {
background:red;
}
#footer_facebook {
background: none repeat scroll 0% 0% #000;
width: 155px;
float: left;
padding: 0px;
margin-left: 5px;
line-height: 35px;
height: 35px;
}
#footer_facebook:hover {
background:red;
}
a.footer_social:link {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
font-style: normal;
text-decoration: none;
color: #FFF;
vertical-align: top;
padding-top: 10px;
}
a.footer_social:hover{
color: red;
}
JSFIDDLE DEMO
To change the colour of the link on hover?
a.footer_social:hover{
color:#F00;
}
To change the colour background on hover (link):
a.footer_social:hover{
color:#000000;
background-color:red;
}
Change the colour of the background (entire div)
#footer_facebook:hover{
background-color:red;
}
#footer_subscribe:hover
{
background:Red;
}
To change color add this to your CSS:
#footer_subscribe:hover
{
background-color:red;
}
#footer_facebook:hover
{
background-color:red;
}
For text alignment:
a:link.footer_social {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
/* 14px/16=0.875em */
font-style:normal;
text-decoration:none;
color:#FFF;
vertical-align: top;
}
use display:table; in parent div and use display: table-cell; vertical-align: middle; in link
#footer_subscribe {
display:table;
}
a.footer_social:link{
display: table-cell;
vertical-align: middle;
}
#footer_subscribe:hover{
background-color:red;
}
working jsFiddle Link
hope this works for you.
I am trying to replicate as closely as possible the look of a book in html that includes drop caps floated left and multiple images that are floated right. Everything works fine with 1 image floated right...but the drop caps change position when more than 1 image is floated right. It looks fine in my editor but not in any browser I've tested. I've tried everything I can think of...
The css:
body {
background:#9CF;
margin:0;
padding:0;
}
h1 {
font-family:Lusitana, serif;
font-size:14px;
letter-spacing:.3em;
}
h2 {
font-family:'Crimson Text', serif;
font-size:12px;
letter-spacing:.3em;
font-weight:400;
}
p {
font-family:'Crimson Text', serif;
font-size:12px;
line-height:16px;
font-weight:400;
margin-top:0;
color:#000;
text-align:justify;
}
.dropcap {
font-family:'Crimson Text', serif;
font-size:310%;
line-height:65%;
margin-top:3px;
margin-right:6px;
color:#333;
display:inline-block;
float:left;
}
#container {
background:#FFF;
height:698px;
width:452px;
padding:30px 30px 40px;
}
#imagediva {
height:229px;
width:127px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
#imagedivb {
height:180px;
width:268px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
.floatright {
clear:right;
float:right;
}
h1.short,h2.short {
line-height:0;
}
The html
<div id="container">
<div class="floatright" id="imagediva"></div>
<div class="floatright" id="imagedivb"></div>
<h1 class="short">First Flight</h1>
<hr size="1" noshade>
<h2 class="short">1929</h2>
<br>
<p><span class="dropcap">W</span>alter’s first flight experience was in a two seater open biplane when he was ten years old. His father hired a pilot take Walter and his cousin Victor Azevedo on a flight around the Oakland, CA. airport, the same airport from which Amelia Earhart would begin her ill fated attempt to circumnavigate the globe six years later in 1937.
</p>
</div>
Check This Fiddle
Give absolute position to the paragraph tag and also give some width to it. This will solve your problem.
body {
background:#9CF;
margin:0;
padding:0;
}
h1 {
font-family:Lusitana, serif;
font-size:14px;
letter-spacing:.3em;
}
h2 {
font-family:'Crimson Text', serif;
font-size:12px;
letter-spacing:.3em;
font-weight:400;
}
p {
font-family:'Crimson Text', serif;
font-size:12px;
line-height:16px;
font-weight:400;
margin-top:0;
color:#000;
text-align:justify;
position: absolute;
width: 300px
}
.dropcap {
font-family:'Crimson Text', serif;
font-size:310%;
line-height:65%;
margin-top:3px;
margin-right:6px;
color:#333;
display:inline-block;
float:left;
}
#container {
background:#FFF;
height:698px;
width:452px;
padding:30px 30px 40px;
}
#imagediva {
height:229px;
width:127px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
#imagedivb {
height:180px;
width:268px;
background:rgba(200,255,255,0.5);
margin:0 0 10px 20px;
}
.floatright {
clear:right;
float:right;
}
h1.short,h2.short {
line-height:0;
}
I'm trying to implement a sticky footer as suggested here:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
I did everything as suggested however not at the bottom of the page/content... see here http://tinyurl.com/eehelp.
Hope someone can help me to fix this so that the footer sticks to the bottom for everything.
Index.php
<body onload="setLeftRightBar()">
<div id="wrap">
<div id="header">
<?php include("header.php"); ?>
<div id="bar">
<div id="menuholder">
<div id="menu">
{ Some content }
</div>
</div>
</div>
</div>
<div id="content">
<div id="left_content">
<?php include('left_sidebar.php'); ?>
</div>
<div id="main_content">
<?php include("path.inc.php"); ?>
<div style="display:none;">
<?php echo "<!--#&88;#&90;#&101;#&114;#&111;". "#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?>
</div>
<?php echo $content;unset($content);?>
</div>
<div id="right_content">
{ Some content }
<div class="right_top" align="center">
<?php echo $lang['SEARCH']; ?>
<?php include("search.inc.php"); ?>
</div>
</div>
</div>
<div style="clear:both" ></div>
<div style="clear:both" ></div>
</div>
<div id="footer" align="center">
<div class="footer_menu">
<li>About us</li> <li>|</li>
<li><?php echo $lang['TERMS_OF_USE']; ?></li><li>|</li>
<li><?php echo $lang['PRIVACY_POLICY']; ?></li><li>|</li>
<li>Contact us</li> <li>|</li>
</div>
<div class="footer_menu2">
<strong>Copyright © 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?> - <?php echo $site_name; ?></strong>
</div>
</div>
</body>
Style2.css
html { height:100%;-webkit-text-size-adjust: 70%; }
body { height:100%;padding:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; }
b { font-size:14px;}
#wrap { width:100%; height:100%; min-width:800px; min-height:100%; max-width:1600px; max-height:1200px; background-color:#FFFFFF; padding: 0;}
#header
{
padding:0 ;
height:250px;
}
#logo{
/* notch below*/
padding-top: 25px;
height:10px;
background-color: white;
float:left;
font-size: 14px;
font-weight: bold;
}
#logo a {
color: black;
text-decoration: none;
}
#logo a:hover {
color: #DF971E;
text-decoration: none;
}
#bar{
height:25px;
width:30%;
min-width:360px;
background-color:#cccccc;
padding-top:0;
}
#menuholder, #bar{
float:right;
}
#menu{
width:auto;
padding-right:15px;
}
#searchbar { width:100%; height:auto;padding-top:20%;}
#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}
.sarch_box { width:10%; height:auto; float:left; padding-left:1%;font-size:75%;}
.box_1 { width:20%; height:auto; float:left;font-size:85%;}
.box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}
.box_2 {width:2%; height:auto; float:left;}
#content { width:90%; min-width:790px; height:auto; padding-left:10%; padding-top:0px; overflow:auto; padding-bottom: 150px; }
#left_content { width:0%; min-width:0px;height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding-left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#main_content { width:59%; min-width:600px;height:auto;float:left; }
.main_content_header {padding-left:2%;color:#BB532E;font-size:100%;font-family:Arial, Helvetica, sans-serif;font-weight:bold;padding-bottom:5%;}
.content_header {width:70%; height:auto; padding-left:3%;}
.left_1 {padding-left:2%;width:.05em; height:100px;background-image:none;background-repeat:repeat-y;float:left;padding-left:2px; }
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat-y;float:left; }
.left_content_middle {width:95%; min-width:550px;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px} <!-- background:#ECF5F4; -->
.content_title {padding:2%; text-align:center; color:#BB532E; font-weight:bold;font-size:95%;font-family:Arial, Helvetica, sans-serif; }
.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}
.left_2 { padding-left:3%; width:21.5%; min-width:130px;height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}
#right_content { width:20%;min-width:150px;height:auto; float:left;padding-left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}<!-- background-color:#ECF5F4; -->
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}
.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}
.right_portion { width:45%; height:auto; float:left;}
.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}
.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}
.gap {width:35%;}
#footer {width:100%;padding:auto;text-align:center;background-color: #3399ff; line-height:40px; color:white; position: relative;
padding-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
.footer_menu {
color: white;
height: 1.2em;
}
.footer_menu2 {
color:gray;
font-size: 13px;
padding-top: 21px;
width: 100%;
}
.footer_menu li {
color: white;
padding-right: 1%;
display: inline;
}
.footer_menu li a { color:#fff; text-decoration:none;}
.footer_menu li a:hover { text-decoration:underline}
.footer_menu strong { font-weight:lighter; color:#666}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
padding-top:-32767px;/* thank you Erik J - negate effect of float*/
}
My gosh. A lot of code for a simple fix.
Try this:
I created a simple jsFiddle for you to refer to.
http://jsfiddle.net/xtYYn/
Hope this fixes the issue,
Thanks,
Aaron
When I try to alter the CSS for the input field named "title" below, which is classed by "submissionfield", the position changes, but the height, length, and font of the field do not change.
How could I make the height of the input field "title" 22 px, the length 550 px, and the font Times New Roman? The CSS below does not do it.
Thanks in advance,
John
echo '<form action="http://www...com/.../submit2.php" method="post">
<input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">
<div class="submissiontitle"><label for="title">Story Title:</label></div>
<div class="submissionfield"><input name="title" type="title" id="title" maxlength="1000"></div>
<div class="urltitle"><label for="url">Link:</label></div>
<div class="urlfield"><input name="url" type="url" id="url" maxlength="500"></div>
<div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div>
</form>
';
The CSS:
.submissiontitle
{
position:absolute;
width:100px;
left:30px;
top:200px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
.submissionfield
{
position:absolute;
width:550px;
left:50px;
top:230px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family: "Times New Roman", Times, serif;
font-size: 22px;
color:#000000;
}
.urltitle
{
position:absolute;
width:250px;
left:30px;
top:300px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
.urlfield
{
position:absolute;
width:550px;
left:30px;
top:330px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
}
.submissionbutton
{
position:absolute;
width:250px;
left:30px;
top:380px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
}
.submittitle
{
position:absolute;
width:250px;
left:30px;
top:150px;
text-align: left;
margin-bottom:3px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#000000;
}
Use this css:
#title {
font-family: 'Times New Roman';
height:22px;
width:550px;
}
You target the div with just .submissionfield. Try .submissionfield input { // stuff } to target the input element within the div with that class.