How can I remove this strange black outlines below my buttons. Take a look at my code and its output.
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background: hsl(0, 0%, 95%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
margin: 40px 0;
font-size: 15px;
}
div {
background: white;
width: 85%;
height: 30%;
}
.sedans {
background: hsl(31, 77%, 52%);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-sizing: border-box;
padding: 2.9em;
max-width: 450px;
}
h2 {
font-family: "Big Shoulders Display";
color: hsl(0, 0%, 95%);
font-size: 2em;
}
p {
font-family: "Lexend Deca";
color: hsla(0, 0%, 100%, 0.75);
line-height: 1.5em;
padding-bottom: 2em;
}
button {
color: hsl(31, 77%, 52%);
padding: 1em 2.2em;
background: hsl(0, 0%, 95%);
border-radius: 2em;
font-family: "Lexend Deca";
}
div.suvs {
background: hsl(184, 100%, 22%);
box-sizing: border-box;
padding: 2.9em;
max-width: 450px;
}
.suvs button {
color: hsl(184, 100%, 22%);
}
div.luxury {
background: hsl(179, 100%, 13%);
box-sizing: border-box;
padding: 2.9em;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-width: 450px;
}
.luxury button {
color: hsl(179, 100%, 13%);
}
.sedans button:hover {
background: hsl(31, 77%, 52%);
color: hsl(0, 0%, 95%);
}
.suvs button:hover {
background: hsl(184, 100%, 22%);
color: hsl(0, 0%, 95%);
}
.luxury button:hover {
background: hsl(179, 100%, 13%);
color: hsl(0, 0%, 95%);
}
#media only screen and (min-width: 1440px) {
body {
flex-direction: row;
margin: auto 100px;
.sedans {
border-top-right-radius: 0;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
max-width: 310px;
height: 500px;
}
.suvs {
max-width: 310px;
height: 500px;
}
.luxury {
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
max-width: 310px;
height: 500px;
}
p {
line-height: 1.7em;
}
h2 {
font-size: 2.5em;
}
button {
margin-top: 2em;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerson-web001</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sedans">
<img src="images/icon-sedans.svg" alt="">
<h2>SEDANS</h2>
<p>Choose a sedan for its affordabiity and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<button>Learn More</button>
</div>
<div class="suvs">
<img src="images/icon-suvs.svg" alt="">
<h2>SUVS</h2>
<p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures</p>
<button>Learn More</button>
</div>
<div class="luxury">
<img src="images/icon-luxury.svg" alt="">
<h2>LUXURY</h2>
<p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p>
<button>Learn More</button>
</div>
</body>
</html>
To remove your button outlines, you can simply set the border: 0 and outline: 0
button {
color: hsl(31, 77%, 52%);
padding: 1em 2.2em;
background: hsl(0, 0%, 100%);
border-radius: 2em;
font-family: "Lexend Deca";
/* Add this to your button tag */
outline: none; /* Optional */
border: 0;
}
Related
I could able to get progress bar with below code, but couldn't find solution how to add a small circle on the progress bar ?
HTML
<progress max="100" value="75"></progress>
CSS
progress {
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
Add a second background using a radial-gradient
progress {
width: 90%;
display: block; /* default: inline-block */
margin-bottom:1em;
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: radial-gradient(4px at 97%,white,white 4px,transparent),linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%))
;
}
<progress max="100" value="75"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="25"></progress>
I have no idea how to add a circle at the end of the progress element, but it is possible to do it with the div element
CSS:
.first{
width: 90%;
display: block; /* default: inline-block */
padding: 3px;
border: 0 none;
background: rgb(215, 211, 211);
border-radius: 14px;
}
.second{
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
border-radius: 14px;
height: 10px;
width: 75%;
}
.third{
width: 10px;
background: linear-gradient(to right, hsl(0, 0%, 100%), hsl(0, 0%, 99%));
border-radius: 60px;
height: 8px;
width: 8px;
margin: 1px;
margin-right: 1px !important;
float: right;
margin-right: 0px;
color: white;
}
HTML:
<div class="first">
<div class="second">
<div class="third">.</div>
</div>
</div>
I'm having an issue with my footer. I set up the footer to be a flexbox and I want the "social media" header and icons to wrap onto the second row of the footer but for some reason whenever I set the "container" class to flex-wrap: wrapeverything in the footer becomes aligned vertically down the screen.
.container {
position: relative;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: baseline;
background: black;
text-decoration: none;
color: white;
}
.items {
background: transparent;
order: 5;
flex: 1 auto;
color: white;
padding: 40px 0;
width: 100%;
height: auto;
text-align: center;
font-family: Arial, sans-serif;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.items a {
text-decoration: none;
color: #a2a4a7;
}
.items a:hover {
cursor: pointer;
color: white;
}
#footer-headings {
font-family: 'Cabin Condensed', sans-serif;
font-size: 20px;
padding: 10px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
#media only screen and (max-width: 650px) {
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
}
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 100%;
bottom: -5px;
background: white;
height: 2.5px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
#media only screen and (max-width: 650px) {
.items {
font-size: 10px;
}
#footer-headings {
font-size: 10px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="items">
<p id="footer-headings">Useful Links</p><br>
<p>Find a Store</p><br>
<p>Sign Up For Email</p><br>
<p>Become A Member</p><br>
<p>Site Feedback</p>
</div>
<!-- <div class="vertical-right-1" style="left: 25%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<strong>
<p id="footer-headings">About The
League</p><br>
</strong>
<p>About Us</p><br>
<p>Careers</p><br>
<p>News</p><br>
<p>Sustainability</p>
</div>
<!-- <div class="vertical-right-1" style="left: 50%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">
<strong>Policies</strong></p><br>
<p>Terms of service</p><br>
<p>Refund</p><br>
<p>Privacy</p><br>
<p>Shipping</p>
</div>
<!-- <div class="vertical-right-1" style="left: 75%; height: 90%; margin: 10px auto; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">Need To Talk?</p><br>
<p>Order Status</p><br>
<p>Returns</p><br>
<p>Payment Options</p><br>
<p>Contact Us</p><br>
</div>
<div class="items wrap">
<h3 id="footer-headings">Follow Us!</h3><br>
</div>
</div>
Any help with getting the "Follow Us" and the social icons belew it to wrap onto the next row and remain horizontal and ideally centered would be greatly appreciated.
you should use flex-wrap:wrap inside the container, but also remove width:100% from items.
.container {
position: relative;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: baseline;
background: black;
text-decoration: none;
color: white;
}
.full {
/* flex-grow: -1; */
}
.items {
background: transparent;
order: 5;
flex: 1 auto;
color: white;
padding: 40px 0;
/* width: 100%; */
height: auto;
text-align: center;
font-family: Arial, sans-serif;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.items a {
text-decoration: none;
color: #a2a4a7;
}
.items a:hover {
cursor: pointer;
color: white;
}
#footer-headings {
font-family: 'Cabin Condensed', sans-serif;
font-size: 20px;
padding: 10px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
#media only screen and (max-width: 650px) {
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 10px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
}
.underline {
display: inline;
position: relative;
overflow: hidden;
}
.underline:after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 100%;
bottom: -5px;
background: white;
height: 2.5px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
right: 0;
}
#media only screen and (max-width: 650px) {
.items {
font-size: 10px;
}
#footer-headings {
font-size: 10px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="items">
<p id="footer-headings">Useful Links</p><br>
<p>Find a Store</p><br>
<p>Sign Up For Email</p><br>
<p>Become A Member</p><br>
<p>Site Feedback</p>
</div>
<!-- <div class="vertical-right-1" style="left: 25%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<strong>
<p id="footer-headings">About The
League</p><br>
</strong>
<p>About Us</p><br>
<p>Careers</p><br>
<p>News</p><br>
<p>Sustainability</p>
</div>
<!-- <div class="vertical-right-1" style="left: 50%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">
<strong>Policies</strong></p><br>
<p>Terms of service</p><br>
<p>Refund</p><br>
<p>Privacy</p><br>
<p>Shipping</p>
</div>
<!-- <div class="vertical-right-1" style="left: 75%; height: 90%; margin: 10px auto; ">
</div> -->
<div class="items" style="text-decoration: none; color: white;">
<p id="footer-headings">Need To Talk?</p><br>
<p>Order Status</p><br>
<p>Returns</p><br>
<p>Payment Options</p><br>
<p>Contact Us</p><br>
</div>
<div class="items wrap full">
<h3 id="footer-headings">Follow Us!</h3><br>
</div>
</div>
when i use css + html and sent email to gmail, the css not appear . When i run in local just /localhost/text.html the css appear. I stagnant with this.
The Question is:
How can the code below appear in Gmail?.
i have the code like this (HTML + CSS):
<!DOCTYPE HTML> <html>
<head>
<!-- <htm><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></htm> -->
<title>Email notification</title>
<style> * {
box-sizing: border-box; } .btn {background: #ffb300; background-image: -webkit-linear-gradient(top, #ffb300, #2980b9); background-image: -moz-linear-gradient(top, #ffb300, #2980b9); background-image: -ms-linear-gradient(top, #ffb300, #2980b9); background-image: -o-linear-gradient(top, #ffb300, #2980b9); background-image: linear-gradient(to bottom, #ffb300, #2980b9); -webkit-border-radius: 7; -moz-border-radius: 7; border-radius: 7px; font-family: Georgia; color: #ffffff; font-size: 15px; background: #ffb300; padding: 10px 20px 10px 20px; text-decoration: none;} .btn:hover { background: #cf9204; background-image: -webkit-linear-gradient(top, #cf9204, #cf9204); background-image: -moz-linear-gradient(top, #cf9204, #cf9204); background-image: -ms-linear-gradient(top, #cf9204, #cf9204); background-image: -o-linear-gradient(top, #cf9204, #cf9204); background-image: linear-gradient(to bottom, #cf9204, #cf9204); text-decoration: none;} #header {
box-sizing: border-box;
width: 80%;
height: 80px;
margin: 0 auto;
padding: 0px;
color: #fff;
text-align: center;
background-color: #000;
font-family: Open Sans,Arial,sans-serif;
border-radius: 10px 10px 0px 0px;
}
#footer {
width: 80%;margin: 0 auto;clear: both;text-align: center;padding: 20px 0;font-family: Verdena;background-color: #000; color: #838779;
border-radius: 0px 0px 10px 10px;
line-height: 1.5em;
}
#outer {
box-sizing: border-box;
border-right-style: solid;
border-left-style: solid;
clear:both;
padding-top: 0px;
width: 80%;
margin: 0 auto;
margin-top: 0;
text-align: center;
overflow: auto;
}
#inner {
box-sizing: border-box;
width: 100%;
float: left;
padding: 0;
background-color: #fff;
font-family: Open Sans,Arial,sans-serif;
font-size: 14px;font-weight: normal;
line-height: 2.0em;
color: #323330;
margin-top: 0;
text-align: center;
}
/*a {
color: #FFBA08;
}*/
</style>
<title>Email notification</title>
</head>
<body>
<div id="header">
<img height="60" width="220" src="" alt="" title="">
</div>
<div id="outer">
<div id="inner">
<h1> Text 1 </h1>
<p> Text 2 </p>
<p> Text 3 </p>
<p> <a class="btn btn-warning" href="#"> Activation your account </a> <p>
<p> Tetxt 5 </p>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
Text 5
</div>
</body>
I am designing a page, and run into a problem, I can not solve on my own. On zooming out, the items in the header are moving vertically, at 25%, the elements are in completely wrong position.
I am using block display, because i want the menu items to move to the center on zoomout(like on facebook, twitter or here), so inline and inline-block not solving my problem.
Same reason on relative positioning.
Is there another way to achive the same effect instead of relative positioning?
Any ideas how to make it right?
Cheers
Andrew
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen"> </style>
<title>Layout</title>
<link href="../Content/LAYOUT.css" rel="stylesheet" />
</head>
<body>
<div id="menucontainer">
<div id="wrapper">
<a href="HTTP://www.google.com" class="LC">
<p class="L"> </p>
</a>
<a href="http://www.idk.com" class="KC">
<p class="K">Új Kérdés</p>
</a>
<a href="http://www.idk.com" class="EC">
<p class="E">Új Értékelés</p>
</a>
<a href="http://www.idk.com" class="MessageC">
<p class="Message"> </p>
</a>
</div>
</div>
</body>
</html>
CSS:
body { background-color: lightgray;
margin:0 auto;}
#menucontainer {
position: fixed;
width: 100%;
min-height: 45px;
height: 20px;
background: #3f3f3f; /* Old browsers */
background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 91%, #3f3f3f 91%, #33eb31 93%, #33eb31 101%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(91%,#000000), color-stop(91%,#3f3f3f), color-stop(93%,#33eb31), color-stop(101%,#33eb31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* IE10+ */
background: linear-gradient(to bottom, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#33eb31',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
font-family: Corbel;
z-index: 2;
display: inline-block; }
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
z-index: -1;
white-space: nowrap;
height: 30px;
max-height: 30px;
display: block;
padding-top:9px;
padding-bottom:10px; }
.LC {
left: 0%;
min-width: 30px;
top: -20px;
max-width:30px;
width:30px;
display: block;
position:relative;
white-space:nowrap;
height:30px;
min-height:30px;
margin-right:20px;
margin-top:2px; }
.L {
background-image: url(/logo.png);
background-size: 30px 30px;
height: 30px;
width: 30px;
min-width: 30px;
max-width: 30px; }
.KC {
left: 7%;
top: -64px;
display: inline-block;
position: relative;
text-decoration: none;
width:90px;
min-width:90px;
white-space:nowrap;
height:30px; }
.K {
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
text-decoration:none; }
.K:link {
text-decoration: none; }
.K:visited {
text-decoration: none; }
.K:hover {
text-decoration: none;
color: #33eb31; }
.K:active {
color: white;
text-decoration: none; }
.EC {
left: 20%;
top: -105px;
display: block;
position: relative;
text-decoration: none;
width:110px;
min-width:110px;
white-space:nowrap;
height:30px; }
.E {
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
min-width: 30px; }
.E:link {
text-decoration: none;
}
.E:visited {
text-decoration: none;
}
.E:hover {
text-decoration: none;
color: #33eb31;
}
.E:active {
color: white;
text-decoration: none;
}
I think you might be over complicating this a little bit. you shouldn't need to use position:absolute;. You should use ul li elements for your menu instead. You can set #wrapper to the size of your page and use margin:0px auto to center it.
Let me know if this looks like what you're trying to do: http://jsfiddle.net/gxwxk3zv/
I am working on a site/mockup for someone and I have finish it and was testing to make sure it works across several browsers. It works fine in Chrome and Opera, but I was surprised to see that in Safari, every thing is messed up. I don't even know what is wrong, it just looks weird. The website is here: http://addisonbean.com/site/. Also, when I uploaded to my server, the heading in the footer that says "Find Us" got moved down, and to the left, even in Chrome.
I'd appreciate any help. Here is the source anyone who wants that:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WEARWELL</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div id="sub-header">
<div class="top">
<div id="sub-top">
<input type="text" placeholder="Search by keyword or product number">
<span id="search" class="red-gradient">
<input type="submit" value="">
</span>
<ul class="red-gradient" id="top-nav">
<li>Language</li>
<li id="arrow"></li>
<li>Where to Buy</li>
<li>Login</li>
<li>0 Items in RFQ Cart</li>
</ul>
</div>
<span class="clearfix"></span>
</div>
<nav id="pages">
<h1></h1>
<ul>
<li>Products</li>
<li id="current">Resources</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<h2 id="page-title">Resources</h2>
</div>
<span class="clearfix"></span>
</header>
<section>
<div id="current-page">Home > <b>Resources</b></div>
<h3>Lorem Ispum Dolor</h3>
<nav id="links">
<li>Wearwell Warrenty PDF</li>
<li>Maintenance & Upkeep Guide</li>
<li>Chemical Resistance Guide</li>
<li>Installation Guide</li>
<li>2013 PDF Catalog</li>
<li>Frequently Asked Questions</li>
<span class="clearfix"></span>
</nav>
<h3>Amet Lacinia Nec Hendrer</h3>
<p id="info">Aenean rhoncus, urna quis faucibus cursus, nunc leo rhoncus velit, vitae aliquam justo lectus eu nunc. Ut elit massa, commodo eget blandit eu, consectetur quis neque. Fusce consectetur libero quis velit mattis dignissim. Sed nibh dui, lacinia nec hendrer vitae turpis.</p>
</section>
<h3 id="bottom">
We develop working surfaces for industrial athletes
</h3>
<footer>
<div id="footer-center">
<table>
<tbody>
<tr>
<th>Products</th>
<th>Resources</th>
<th>About Us</th>
</tr>
<tr>
<td>ErgoDeck</td>
<td>Warranty</td>
<td>Capabilities</td>
</tr>
<tr>
<td>Rejuvenator</td>
<td>Maintenance Guide</td>
<td>News</td>
</tr>
<tr>
<td>Diamond Plate</td>
<td>Chemical Resistance Guide</td>
<td>Innovation</td>
</tr>
<tr>
<td>Grit Shield</td>
<td>Installation Guide</td>
<td>Request a Demo</td>
</tr>
<tr>
<td>Rover</td>
<td>Download Catalog</td>
<td>Request A Site Survey</td>
</tr>
<tr>
<td>Invision</td>
<td>Videos</td>
<td>Contact Us</td>
</tr>
<tr>
<td>Fit Kits</td>
<td></td>
<td>Terms and Conditions</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Legal</td>
</tr>
</tbody>
</table>
<aside>
<span id="line">
<img src="img/line.png" alt="">
</span>
<span id="content">
<h4>Find Us</h4>
<p class="footer-info">
Wearwell Inc.
</p>
<p class="footer-info">
199 Threet Industrial Road <br>
Smyrna, Tennessee 37167
</p>
<p class="footer-info">
Email: floors#wearwell.com
</p>
<div id="icons">
</div>
</span>
</aside>
<span class="clearfix"></span>
</div>
</footer>
</body>
</html>
css/style.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-family: helvetica;
background: url('../img/bg.jpg');
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .clearfix { zoom: 1; }
.red-gradient {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418));
background: -webkit-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center, #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
display: inline-block;
}
header {
background: url('../img/header.jpg');
color: white;
-webkit-box-shadow: 2px 0 6px black;
-moz-box-shadow: 2px 0 6px black;
box-shadow: 2px 0 6px black;
}
#sub-header {
width: 1200px;
margin: 0 auto;
}
.top {
position: relative;
right: 0;
padding-bottom: 20px;
font-size: 12px;
font-weight: 200;
}
.top input[type=text] {
margin: 0 1px 0 0;
border: none;
padding: 12px;
height: 28px;
width: 230px;
background: rgba(255, 255, 255, .7);
float: left;
}
.top input[type=text]::-webkit-input-placeholder {
color: black;
}
.top input[type=text]::-ms-input-placeholder {
color: black;
}
.top input[type=text]::-moz-placeholder {
color: black;
}
span#search {
width: 28px;
height: 28px;
padding: 12px;
float: left;
margin-right: 5px;
}
.top input[type=submit] {
border: none;
background: url('../img/search.png') 50% 50% no-repeat;
width: 15px;
height: 15px;
padding: 0px;
float: left;
position: relative;
top: -7.5px;
left: -7.5px;
}
#top-nav {
height: 28px;
list-style: none;
padding: 0;
margin: 0;
}
#sub-top {
float: right;
}
#top-nav li {
list-style: none; /* for IE8 */
display: inline-block;
height: 28px;
float: left;
padding: 8px;
border-left: 1px solid black;
}
#top-nav li:first-child {
border: none;
}
#arrow {
background: url('../img/nav-arrow.png') 50% 50% no-repeat;
width: 28px;
margin: 0;
}
nav#pages {
background: rgba(0, 0, 0, .8);
height: 64px;
margin-bottom: 80px;
}
nav#pages h1 {
background: url('../img/logo.png') 50% 50% no-repeat;
width: 340px;
height: inherit;
margin: 0;
display: inline-block;
}
nav#pages ul {
list-style: none;
text-transform: uppercase;
float: right;
padding: 0;
margin: 0;
height: inherit;
display: inline-block;
}
nav#pages li {
list-style: none; /* for IE8 */
display: inline-block;
padding: 20px;
height: inherit;
line-height: 34px;
}
nav#pages li#current {
background: #cc3423;
}
#page-title {
float: right;
background: rgba(0, 0, 0, .8);
text-align: left;
padding: 30px;
padding-left: 40px;
padding-right: 375px;
text-transform: uppercase;
margin: 75px 0;
}
section {
background: white;
width: 1220px;
margin: 0 auto;
padding: 15px 25px 100px;
-webkit-box-shadow: 0 3px 10px #555;
-moz-box-shadow: 0 3px 10px #555;
box-shadow: 0 3px 10px #555;
}
#current-page {
font-size: 12px;
}
section h3 {
text-transform: uppercase;
margin: 25px 15px 10px;
}
nav#links {
list-style: none;
margin: 0 auto;
width: 1170px;
color: #eb6852;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
}
nav#links li {
background: #eaeaea;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjRiNGI0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #eaeaea 0%, #b4b4b4 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eaeaea), color-stop(100%,#b4b4b4));
background: -webkit-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: -o-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: -ms-radial-gradient(center, ellipse cover, #eaeaea 0%,#b4b4b4 100%);
background: radial-gradient(ellipse at center, #eaeaea 0%,#b4b4b4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#b4b4b4',GradientType=1 );
line-height: 75px;
width: 382px;
margin: 4px;
text-align: center;
float: left;
height: 75px;
}
nav#links li:nth-child(5) {
background: #c33221;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNjMzMyMjEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOGUyNDE4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #c33221 0%, #8e2418 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#c33221), color-stop(100%,#8e2418));
background: -webkit-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -o-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: -ms-radial-gradient(center, ellipse cover, #c33221 0%,#8e2418 100%);
background: radial-gradient(ellipse at center, #c33221 0%,#8e2418 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c33221', endColorstr='#8e2418',GradientType=1 );
color: white;
}
#info {
margin-left: 15px;
}
h3#bottom {
text-align: center;
color: #4d4d4d;
font-size: 40px;
font-weight: 200;
}
footer {
background: url('../img/footer.jpg');
color: white;
}
#footer-center {
margin: 0 auto;
padding: 30px 0;
width: 809px;
}
footer table {
float: left;
}
footer tr {
text-align: right;
}
footer td {
padding: 4px;
padding-left: 30px;
padding-right: none;
font-size: 15px;
}
footer th {
text-transform: uppercase;
padding: 7px;
padding-left: 30px;
padding-right: none;
}
aside {
float: left;
}
#line {
margin: 0 35px;
display: inline-block;
float: left;
}
aside #content {
float: left;
}
aside h4 {
text-transform: uppercase;
margin: 7px;
}
aside p.footer-info {
margin: 7px;
font-size: 15px;
line-height: 20px;
}
aside p.footer-info a {
color: #cc3524;
text-decoration: none;
}
#icons a {
height: 34px;
width: 37px;
display: inline-block;
background-repeat: no-repeat;
}
#icons a:nth-child(1) {
background-image: url('../img/icons/fb.png');
}
#icons a:nth-child(2) {
background-image: url('../img/icons/google.png');
}
#icons a:nth-child(3) {
background-image: url('../img/icons/twitter.png');
}
#icons a:nth-child(4) {
background-image: url('../img/icons/youtube.png');
}
#icons a:nth-child(5) {
background-image: url('../img/icons/in.png');
}
Try fixing these errors from W3C Validator, clear browser cache and try again in Safari.
Your CSS needs some cleaning up as well.