It looks like my styling in Google Chrome isn't quite working out as I have intended (link). It works just fine on Internet Explorer 8.
Here's the style sheet:
#charset "utf-8";
/* Stylesheet for Northview Game Tickets */
#mainwrapper {
width:18cm;
height:25cm;
background-color:#0F0;
}
#title {
width:680px;
height:117px;
/*background-image:url(http://nhswag.com/tickets/images/title.png);*/
background-color:#183f61;
}
#title-img {
width:680px;
height:117px;
}
#sportimage {
width:680px;
height:302px;
background-image:url(http://nhswag.com/tickets/images/sportimg.png);
}
#instructionstitle {
width:340px;
height:57px;
float:left;
padding-top:15px;
/*background-color:#353435;*/
background-color:#183f61;
vertical-align:text-bottom;
color:#FFFFFF;
}
#instructions {
width:340px;
height:416px;
float:left;
text-align:left;
padding-top:15px;
/*background-color:#8B8B8B;*/
/*background-color:#003;*/
background-color:#F2EEEA;
}
#ticketinfo {
width:170px;
height:189px;
float:right;
text-align:left;
padding-top: 15px;
padding-left: 15px;
/*background-color:#767676;*//*#633;*/
background-color:#d9d5d2;
}
#barcodewrapper {
width:170px;
height:189px;
float:right;
padding-top:44px;
/*background-color:#767676;*//*#FFF;*/
background-color:#d9d5d2;
}
#barcode {
border-width:thick;
border-color:#000;
}
#adspace {
width:340px;
height:284px;
float:right;
padding-top:10px;
background-image:url(http://nhswag.com/tickets/images/ad.png);
}
#copyrightwrapper {
width:680px;
height:57px;
padding-top:25px;
background-color:#183f61;
font-size:12px;
color:#FFFFFF;
}
What style option may be causing the inconsistencies?
EDIT:
Page source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="ticketstyle.css" />
<title>NHSWAG Game Ticket</title>
</head>
<?php
/*
Required Fields:
1) name
2) type (adult/student/child)
3) price
4) barcodeid
ex: http://nhswag.com/tickets/ticketprint.php?name=John%20Smith&type=Adult&price=4.98&barcodeid=9780618503049
*/
function google_qr($url,$size ='150',$EC_level='L',$margin='0') {
$url = urlencode($url);
echo '<img id="barcode" src="http://chart.apis.google.com/chart?chs='.$size.'x'.$size.'&cht=qr&chld='.$EC_level.'|'.$margin.'&chl='.$url.'" alt="QR code" width="'.$size.'" height="'.$size.'"/>';
}
?>
<body style="background-color:#b0b0b0">
<center>
<div id="mainwrapper">
<div id="title">
</div>
<div id="sportimage">
sportimage
</div>
<div id="instructionstitle">
Instructions</div>
<div id="ticketinfo">
<strong>Ticket Details:</strong><br><br>
Name:<br>
<?php echo $_GET["name"]; ?><br>
Type:<br>
<?php echo $_GET["type"]; ?><br>
Price:<br>
$<?php echo $_GET["price"]; ?>
</div>
<div id="barcodewrapper">
<center>
<div id="barcode">
<?php google_qr('http://www.nhswag.com/tickets/check/ticketcheck.php?barcodeid='.$_GET["barcodeid"],100); ?>
<?php // echo md5("JustianMeyerNorthview Gwinett Football"); ?>
</div>
</center>
</div>
<div id="instructions">
<ol>
<li>Print this ticket and keep it for your records.</li>
<li>Present this ticket at the entrance of your <strong>Northview High School</strong> sponsored event.</li>
<li>Enjoy! Ask the ticket manager for seating.</li>
</ol>
</div>
<div id="adspace">
<p>Advertisement</p>
<p> </p>
</div>
<div id="copyrightwrapper">
Copyright © NHSwag Team, 2011
</div>
</div>
</center>
</body>
</html>
Your page is rendering in Quirks mode in IE8:
Quirks mode is a rendering mode used
by some web browsers for the sake of
maintaining backward compatibility
with web pages designed for older
browsers or coded without standards
conformance.
You can't hope that a page which is created to work in IE Quirks mode will work in any other browser - it almost always won't, as it the case here.
So, you should change the doctype (first line) to <!DOCTYPE html> to get it out of Quirks mode and fix the (numerous) problems from there.
If you need more advice on how to fix your HTML/CSS to work with a proper doctype, let me know and I'll provide a more thorough answer on how to do this.
I tested this in IE7/8, Firefox, Chrome: it renders consistently.
I tried to keep as much of your HTML/CSS as possible; because I did that, the code could be more elegant, but it works!
I added all the styles at the top just to make it easier to test; you should put them in your stylesheet.
You will have to add back in your PHP where appropriate. I added in one tiny snippet of PHP to output the current year.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>NHSWAG Game Ticket</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
border: 0
}
body {
background: #b0b0b0;
padding: 5px
}
#mainwrapper {
width: 680px;
margin: 0 auto
}
#title {
height: 117px;
/*background-image:url(http://nhswag.com/tickets/images/title.png);*/
background-color: #183f61;
}
#sportimage {
height: 302px;
background-image: url(http://nhswag.com/tickets/images/sportimg.png);
}
#floatContainer {
background: #f2eeea;
overflow: auto
}
#left {
float: left;
width: 50%
}
#right {
float: right;
width: 50%
}
#instructionstitle {
height: 32px;
padding-top: 12px;
/*background-color: #353435;*/
background-color: #183f61;
vertical-align: text-bottom;
color: #fff;
text-align: center
}
#barcodewrapper {
overflow: auto;
background: #d9d5d2
}
#barcode {
float: left;
padding: 20px
}
#ticketinfo {
float: left;
padding: 16px 0
}
#ticketinfo dd {
margin-left: 12px
}
#ticketinfo dl {
margin: 0
}
#copyrightwrapper {
height: 35px;
padding-top: 22px;
background-color: #183f61;
font-size: 12px;
color: #fff;
text-align: center
}
#adspace {
height: 284px;
background: #fff;
text-align: center;
background:url(http://nhswag.com/tickets/images/ad.png) no-repeat
}
#adspace p {
margin: 0;
padding: 12px 0
}
</style>
</head>
<body>
<div id="mainwrapper">
<div id="title">title</div>
<div id="sportimage">sportimage</div>
<div id="floatContainer">
<div id="left">
<div id="instructionstitle"> Instructions </div>
<div id="instructions">
<ol>
<li>Print this ticket and keep it for your records.</li>
<li>Present this ticket at the entrance of your <strong>Northview High School</strong> sponsored event.</li>
<li>Enjoy! Ask the ticket manager for seating.</li>
</ol>
</div>
</div>
<div id="right">
<div id="barcodewrapper">
<div id="barcode"> <img id="barcode" src="http://chart.apis.google.com/chart?chs=100x100&cht=qr&chld=L|0&chl=http%3A%2F%2Fwww.nhswag.com%2Ftickets%2Fcheck%2Fticketcheck.php%3Fbarcodeid%3D" alt="QR code" width="100" height="100"/> </div>
<div id="ticketinfo"> <strong>Ticket Details:</strong><br>
<br>
<dl>
<dt>Name:</dt>
<dd>John Smith</dd>
<dt>Type:</dt>
<dd>Student</dd>
<dt>Price:</dt>
<dd>$5</dd>
</dl>
</div>
</div>
<div id="adspace">
<p>Advertisement</p>
<p> </p>
</div>
</div>
</div>
<div id="copyrightwrapper"> Copyright © NHSwag Team, <?php echo date('Y') ?></div>
</div>
</body>
</html>
It's because of IE's default box-sizing (which is non-w3c compliant, BTW, and it's Chrome that's working correctly) when it is in Quirks Mode.
Try this:
#ticketinfo {
width:170px;
height:189px;
float:right;
text-align:left;
padding-top: 15px;
/*padding-left: 15px;*/
/*background-color:#767676;*//*#633;*/
background-color:#d9d5d2;
}
In IE the element's width is 170px, in Chrome: 170px + 15px padding.
But what you REALLY should do is to use a correct doctype.
his problem cause by different block model implementation between ie and chrome/firefox/opera (w3c) which ie9 now already comply with standard. I have tested with IE8 and chrome. simple fix:
#copyrightwrapper {
width: 680px;
height: 57px;
padding-top: 25px;
background-color: #183F61;
font-size: 12px;
color: white;
clear: both; /*add this to make sure footer is in the bottom as u use float before*/
}
then remove unnecessary padding-top from other float div
Related
Trying to get two div's to line up side by side but having some trouble getting them to connect with each other. This is the design of what im trying to make where it says "We're hiring today" and "Schedule Today".
HTML:
<!DOCTYPE html>
<head>
<title>Merry Maids</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="backgroundofdivgreen">
<header>
<div class="logo"><img src="images/logo.jpg"></div>
<nav>
Home
Services
Offers
People
Franchises
Reviews
<div class ="phone">
Call Us Today: (800) Merry Maids
</div>
<div class="media">
<img src="images/twitter.png">
<img src="images/facebook.png">
</div>
<div class="clearboth"></div>
</header>
</nav>
</div>
<div class="banner"><img src="images/banner.jpg" alt="Merry Maids Banner Image"></div>
<div class="spacer1"></div>
<article>
<div class="wrapper">
<div class="yellow">
<h1>Schedule Appointments</h1>
<p>Our cleaning services are thorough, consistent and customized. If you would like to request a special service, change your cleaning schedule, or skip an area in your home, just let us know! We are happy to fulfill every request in order to exceed your expectations.Merry Maids home cleaning services are available weekly, every other week, monthly or one-time. On every visit, your Merry Maids team dusts, vacuums, washes and sanitizes each room.</p>
</div>
<div class="green">
<h1>We're Hiring Today</h1>
<p>For more than 30 years, our team members have provided reliable service for homeowners like you worldwide. We clean people's homes like they are our own and we treat our team members with the same concern, respect and care we expect them to show our customers. Merry Maids knows that our team members are our greatest asset and we recognize the power of our people.</p>
</div>
CSS:
.clearboth {
clear:both;
}
.backgroundofdivgreen {
height: 96px;
margin: 0px;
background-color: #39b54a;
}
header {
width: 980px;
background-color: #39b54a;
margin: 0px auto;
}
nav {
float:right;
width: 570px;
text-align: right;
padding-top:10px;
}
nav a {
color:white;
margin: 0px 25px 0px 0px;
text-decoration:none;
}
nav a:hover {
color: #fff799;
}
.logo {
float:left;
}
.phone {
margin: 40px 0px 0px 130px;
color: white;
float:left;
}
.media {
float: right;
margin: -23px 30px 0px 0px;
}
.banner {
height:553px;
width:1600px;
margin: 0px auto;
}
.spacer1 {
height:20px;
background-color: #39b54a;
margin: 0px auto;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
}
.yellow {
position:fixed;
width:800px;
height:313px;
background-color: #fff799;
float:left;
text-align:right;
}
.green {
position:fixed;
width:800px;
height:313px;
background-color: #005e20;
float:right;
}
Remove the position: fixed from the two divs. (position: fixed takes an element out of the document flow so the floats have no effect on them.)
You'll also need to make sure the wrapper has enough width to accommodate the full width of both divs.
How do I get border radius to work in IE?
I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.
Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.
I also have this meta tag in my html:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The code is below.
CSS:
body .overlay {
background-color: rgba(0, 114, 198,.7);
height:100%;
position:relative;
}
body .layer {
background: url('photo-homebanner.jpg') 55%;
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}
body .goldenDiv {
width:665px;
height:326px;
position:fixed;
z-index:100;
margin-top:-38px;
margin-left:-8px;
}
body h1 {
color:white;
text-align:center;
font-family:sans-serif;
padding-top:22px;
padding-bottom:5px;
font-size:45px;
}
body h3 {
color:white;
text-align:center;
font-family:sans-serif;
font-weight:100;
padding-bottom:14px;
}
body h3.hidden {
visibility:hidden;
padding-bottom:0px;
position:absolute;
top:220px;
left:190px;
}
body input:focus {
outline:none;
}
body .prettyInput {
align-content: center;
padding-left: 20px;
padding-right: 70px;
margin-left: 106px;
width: 350px;
height: 61px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
border: hidden;
margin-bottom: 40px;
}
body .inputOverlap {
position:absolute;
top:167px;
top:166px\9;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
body hr {
color:white;
position:absolute;
top: 77px;
left:120px;
align-content:center;
}
#-moz-document url-prefix() {
body .inputOverlap {
position:absolute;
top:168px;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
}
HTML:
<body>
<div class="goldenDiv">
<div class="layer">
<div class="overlay">
<h1>Stay ahead of industry news!</h1>
<hr width="450px"/>
<h3>Let us send you the latest from our Marketing Department.</h3>
<input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
<input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
<h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
<h3>100% privacy, no spam, just news.</h3>
</div>
</div>
</div>
</body>
The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.
Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.
Stylistic notes (unrelated to the problem):
border-radius: 0 12px 12px 0; means the same thing as
border-top-right-radius:12px;
border-bottom-right-radius:12px;
but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.
The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.
So I am coding some semi-complex buttons where when you click on one, a loading symbol moves in on the left of some text.
The buttons look fine in all browsers (ie8-10, FF, Chrome on Mac & PC) except Safari on mac. It seems to add extra space to the right of the lettering for no reason.
Here's a screen shot of what it should look like:
Here's what the before looks like in Safari:
Here's the HTML:
<div class="move1">
<div class="final-button small">
<div class="final-spinner">
<img src="images/Loader_24g.gif" />
</div>
<div class="final-title">
send money
</div>
</div>
</div>
<div class="move2">
<div class="final-button large">
<div class="final-spinner">
<img src="images/Loader_32g.gif" />
</div>
<div class="final-title">
send money
</div>
</div>
</div>
and the CSS:
.final-button {
font-family: 'proxima-nova', Helvetica, Arial, Verdana, Sans-Serif;
color: #ffffff;
text-transform:uppercase;
background:#97c231;
float:right;
border-radius:2px;
cursor:pointer;
}
.final-button:hover {
background:#a6d536;
}
.final-button .final-spinner {
float:left;
overflow: hidden;
width: 0px;
}
.final-button .final-title {
float:left;
}
.final-button.small {
font-size: 18px;
padding:8px 28px;
}
.final-button.small .final-spinner {
}
.final-button.small .final-title {
padding: 3px 0 0 0;
}
.final-button.large {
font-size: 24px;
padding:12px 23px;
}
.final-button.large .final-spinner {
}
.final-button.large .final-title {
padding: 2px 0 0 0;
}
.move1, .move2 {
margin:50px 0 0 0;
clear:both;
overflow:hidden;
}
and a live example here:
http://412webdesigns.com/playground/tempGo/button.html
any ideas why safari is doing this? There's nothing on here that should push it over like that.
check this lines in your css in safari dev tools:
.final-button .final-title {
float: left; //remove it
}
I think that is float problem, so remove it or change with #inline-block or #inline.
Try change html:
<div class="final-spinner">
<img src="images/Loader_32g.gif" />
</div>
<div class="final-title">
send money
</div>
To
<img class="final-spinner" src="images/Loader_32g.gif" />
<span class="final-title">
send money
</span>
And don't use float every where :)
Hope it fix your problem
How do I get the p-tag with text "jon harris" beside the p-tag with text "Room 2"
I have tried float-combinations.. but there is something missing..i guess.
here the html code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Avatar Scrolling</title>
<link rel="stylesheet" href="css/events.css" />
</head>
<body>
<div class="event">
<img src="images/red.jpg" alt="picture" />
<p>Room 2</p>
<p class="patient-name">Jon Harris</p>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</body>
</html>
here is the css:
body {
font:13px/1.5 "helvetica neue", helvetica, arial, san-serif;
}
.event {
display:block;
background: #ececec;
width:380px;
padding:10px;
margin:10px;
overflow:hidden;
text-align: left;
}
.event img {
float:left;
}
.event p {
margin:0;
padding-left:60px;
font-weight: bold;
}
.patient-name {
color: #999999;
font-size: 9px;
padding-left: 5px;
}
.event-text{
color: #999999;
font-size: 12px;
padding-left: 5px;
}
.event-timestamp{
color: #000;
padding-left: 5px;
font-size: 9px;
}
Here you go ... http://jsfiddle.net/2N6tu/
You just need to turn the first two <p> elements to inline elements.
Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both e.g:
<div class="event">
<img src="images/red.jpg" alt="picture" />
<div class="event-wrapper">
<div class="event-inner-wrap">
<p class="room-number">Room 2</p>
<p class="patient-name">Jon Harris</p>
</div>
<div class="clear"></div>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</div>
css
.clear {
clear: both;
}
.event-wrapper {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
float: left;
}
.event-inner-wrap {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
}
p.room-number {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the patient name is no bigger than the wrapper width **/
float: left;
}
p.patient-name {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the room number is no bigger than the wrapper width **/
float: left;
}
Good luck.
Edit, because I saw that image you posted after I added this.
Edit again, because you don't need the extra clear: both; and I missed off 2 semi's.
Note, if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; on them if setting widths etc.
have you tried
.event p{display:inline;}
I've been following a tutorial from a book on html and css.
I tried doing a plain header design like youtube's but I can't seem to get the search box and the button to display properly.The button is rendered about 10px lower than the search box as if it had the top padding set.
Can be seen here http://www.wourm.com/index.html
can anyone see why it's happening?
[EDIT : Adding html and CSS to this page]
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Awtunes.com</title>
<link href="awtunes.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div>
<div id="find-videos" class="search floatL" style="top:0px;" >
<form id="searchVideos" name="searchVideos" method="get" action="/">
<input name="q" type="text" class="searchBox" id="searchBox" /><input type="submit" class="searchbutton" value="" />
</form>
</div>
<div class="menu floatL">
<ul>
<li>Videos</li>
<li>Music Videos</li>
<li>Trailers</li>
<li>Create Account</li>
<li>Sign in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css
.awtunes {
font-family: "Courier New", Courier, monospace;
}
.container {
width: 980px;
top: 0px;
margin-left: auto ;
margin-right: auto ;
}
.floatL {
float: left;
position:relative;
}
.floatR {
float: right;
position:relative;
}
.searchBox {
border-style:none;
border-width:0px;
width: 360px;
background-image: url(images/search_bar.png);
background-repeat:no-repeat;
height: 40px;
font-size: 18px;
}
.searchbutton {
border-style:none;
border-width: 0px;
background-repeat:no-repeat;
background-image: url(images/search_button.png);
background-repeat: no-repeat;
width: 55px;
height: 40px;
}
.logo {
width: 122px;
height: 50px;
}
.menu {
width:430px;
}
.search {
width: 425px;
height: 40px;
}
.split {
background-image: url(images/split.jpg);
background-color: #C0C0C0;
background-repeat: no-repeat;
width: 1px;
height: 18px;
}
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(images/split.jpg);
background-repeat: no-repeat;
float: left;
margin: 0 0.15em;
}
if this code comes from a book you better buy a new one.. serious. to get the button aligned just add your floatL class to both of you input fields.
I suggest a CSS reset such as the YUI CSS reset. A cursory check in IE and FF shows some pretty serious inconsistency already. If you use a CSS reset stylesheet, this will at least set your code on a level playing field between browsers. YUI CSS Reset: http://developer.yahoo.com/yui/reset/
Once you have a resource like this in place, many quirks of layout are already handled.
It seems to be because of .searchBox { font-size: 18px; }. If you take all the other styles off of the input.searchBox, you can see that changing the font-size changes the size of the plain old text input, which changes the height of the container of the text input and the button.
I also think it would be a good idea to add your HTML and CSS to this question so that if someone is looking at this question in the future and your site is different, they can still learn from your question!
.searchbutton { vertical-align: top; }
A quick fix to your current code would be to add something like:
.searchbutton {
position: relative;
top: -15px;
}
carolclarinet is right here -- the font-size attribute is the problem (at least in FireFox). I'm not sure if you're using the IE Developer Tools to check your CSS issues, but I'd recommend using it as well as FireBug for FireFox. They'll let you play around with your styles without the tedious modify/save/refresh cycle.