http://www.mohrdevelopment.com
I'm currently only testing the website with 2 browsers:
Rockmelt & Chrome.
Rockmelt problem:
When opened in rockmelt browser, everything functions correctly except for the "About" tab. When it is pressed my header dissapears. I even tried copying the code from one of my other tabs that looked the same (but didn't have the header problem) but the problem still prevailed.
Chrome problem:
Initially when the website is opened in Google Chrome, the navigation bar is aligned vertically. However if you press some of the other tabs, the bar aligns horizontally like it's supposed to (even if you go back to home tab). But if you click around on the tabs fast, there's a chance that the bar aligns vertically again.
I hope someone is able to help me with this problem, since i cannot see the logic in it.
My HTML Code for Home tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!--Navigation bar-->
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<div class="wrap">
<div class="content">
<br>My new selection
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My HTML Code for About tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!-- Navigation bar -->
<ul class="navigation">
<li><em class="home"/><b>Home</b></li>
<li><em class="photos"/><b>Photos</b></li>
<li><em class="projects"/><b>Projects</b></li>
<li class="current"><em class="about"/><b>About</b></li>
<li><em class="contact"/><b>Contact</b></li>
</ul>
<div class="wrap">
<div class="content">
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My CSS Code:
body {
font-family:sans-serif;
background: url(images/background4.png);
margin:0px;
}
/********************\
******* Header *******
\********************/
.header
{
background: url(images/Header.png);
text-indent:-9999px;
width:1092px;
height:132px;
margin:auto;
}
.headerdiv{
width:100%;
margin:0;
background:gray;
}
/********************\
*** Navigation Bar ***
\********************/
.navigation {
background:black url(Navigation/Navigation/nav_background.png);
height:40px;
margin-bottom:0px;
padding-left:10%;
font-size: 0; /*remove whitespace*/
display:block;
width:100%;
}
.navigation li{
display:inline-block;
line-height: 40px;
font-size:16px;
}
.navigation li a{
display:block;
color:#FFFFFF;
padding: 2px 10px;
}
.navigation li a em{
height:32px;
display:inline-block;
padding: 0 5px 6px 60px;
font-weight:bold;
vertical-align: middle;
background-position: 0 50%;
font-size:16px;
}
.navigation li a:hover{
color:#00CCFF;
background: url(Navigation/Navigation/nav_hover.png) no-repeat;
text-decoration:none;
padding: 2px 10px;
}
.navigation .current a {
color:#FFFFFF;
background:url(Navigation/Navigation/nav_hover.png) no-repeat;
padding: 2px 10px;
}
/*Navigation bar icons*/
.navigation li a em.home, em.photos, em.projects, em.about, em.contact{
background-repeat: no-repeat;
margin-bottom:5px;
}
.navigation li a em.home {
background-image: url(Navigation/Icon_images/home.png);
}
.navigation li a em.photos{
background-image: url(Navigation/Icon_images/Photo.png);
}
.navigation li a em.projects{
background-image: url(Navigation/Icon_images/projects.png);
}
.navigation li a em.about{
background-image: url(Navigation/Icon_images/about.png);
}
.navigation li a em.contact{
background-image: url(Navigation/Icon_images/Contact.png);
}
/*Navigation bar icons STOP*/
/* Main Wrapper */
.wrap {
margin:auto;
width:80%;
background:yellow;
}
/********************\
******* Content ******
\********************/
.content
{
background:url(images/outlets.png);
float:left;
width:80%;
height:auto;
min-width:500px;
min-height:900px;
display:inline;
color:white;
border-bottom-left-radius: 50px 50px;
}
.content h1, p, form, label{
color:white;
}
/********************\
******* Sidebar ******
\********************/
aside{
background: url(images/egg_shell2.png);
float:left;
width:20%;
height:inherit;
min-height:900px;
min-width:125px;
display:inline;
border-bottom-right-radius: 50px 50px;
}
aside ul {
padding-left:1px;
list-style:none;
}
/********************\
****** General *******
\********************/
ul a {
text-decoration:none;
color: #666;
}
ul a:hover {
text-decoration:underline;
color:black;
}
li {
list-style:none;
margin-bottom:20px;
}
label {
display: block;
cursor: pointer;
color: #292929;
font-family:sans-serif;
padding-bottom:8px;
}
form ul {
padding-left:0px;
}
textarea {
width:400px;
height:220px;
}
#contact {
padding-left:5px;
font-weight:bolder;
}
#Andapp{
margin-top:50px;
}
/********************\
******* Footer *******
\********************/
.footer{
float:left;
height:150px;
width:100%;
background-color:gray;
margin-top:100px;
text-align:center;
}
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<em> tags aren't closed. It's probably best to abstract away the styling into your CSS files and focus on content in the HTML.
You can run your HTML through the W3C Validator tool to help you with these sorts of errors.
Related
I am currently learning how to code html and css and I am not trying to copy them I just want to learn how to do it like that. Yes it's a CS:GO gambling site I know. I want to learn how to add the font awesome icon and make it clickable and also how to add a padding around only that icon. The website: skinup.gg
My Test Website: https://jsfiddle.net/a2yweme3/
HTML:
<!--Default Stuff-->
<title>CS:GOAbyss</title>
<!--Script Links-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
<!--Website Sidebar-->
<div id="sidebar">
<ul>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
<li>TEST LINK</li>
</ul>
</div>
</body>
CSS:
/* Default Stuff */
body {
margin:0px;
padding:0px;
font-family:"Open Sans", sans-serif;
}
/* Website Sidebar */
#sidebar {
background:rgb(41,41,41);
width:180px;
height:100%;
position:absolute;
left:0px;
top:0px;
}
ul {
margin:0px;
padding:0px;
}
ul li {
list-style:none;
padding:10px;
border-bottom:2px solid #111;
display: block;
}
ul li a {
background:rgb(41,41,41);
color:#ccc;
text-decoration:none;
margin:10px;
}
ul li:before {
content:'\f1ce';
font-family:'FontAwesome';
padding:10px;
background:rgb(125,125,125);
text-align:center;
}
Pretty simple with font-awesome icons, but you can make custom icons by creating pictures and adding :hover to create a hover effect on the pics (it's how that skin site is doing it).
JsFiddle
Updated: JsFiddle
Add icons like this:
<li>
<a href="#" class="navbarLinks">
<div class="icons">
<i class="fa fa-money"></i>
</div>
<div class="textInfo">TEST LINK
</div>
</a>
</li>
And create a hover effect on the fontawesome icon by doing this:
.fa-money:hover{
color: #000;
}
I'm trying to stylise my text in CSS and here's what gets displayed.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<title></title>
</head>
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header id="header">
</header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav>
</nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p">
</section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options">
</section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer id="footer">
<div id="left_side_footer">
<p class="footer_heading">About</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Get to Know John</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Moon Lit Disco's</span>
</a>
</div>
<div id="middle_of_footer">
<p class="footer_heading">Terms and Policies</span>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Cookie Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Terms and Conditions</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Privacy Policy</span>
</a>
<a href="#" class="footer_link">
<span class="footer_paragraph">Copyright and Trademark</span>
</a>
</div>
<div id="right_side_footer">
<p class="footer_heading">Website</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Feedback</span>
</a>
</div>
<div id="copyright">
<p class="legal_paragraph">Logo / site design: Trey Taylor and Charlie Wubs</p>
<p class="legal_paragraph">©2014 Moon Lit Disco's</p>
<p class="legal_paragraph">Version:2014.1.0</p>
</div>
</footer>
<!-- end footer for: ALL PAGES --->
</body>
</html>
any my CSS:
/* SECTIONS */
/* CLASSES */
.legal_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
.footer_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
}
.footer_link{
text-decoration: none;
}
.footer_heading{
display:inline;
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
display:inline;
width=100%;
}
.fp{
text-decoration:none;
color:black;
font-size:1em;
display:block;
font-family:"Helvetica", "Arial", sans-serif;
}
/* STYLE */
a{
text-decoration:none;
}
#footer a.footer_link:hover span{
border-bottom:1px solid black;
border-top:1px solid black;
width:100%
}
#line_break{
}
#left_side_footer{
display:table-cell;
float:left;
padding-right:360px;
padding-bottom:30px;
}
#right_side_footer{
display:table-cell;
float:right;
}
#middle_of_footer{
display:table-cell;
float:center;
}
What I want:
The text to be not underlined, same size and font (for some reason it doesn't do that)
get it so it is all inline
get that legal stuff below it all
Any help would be must appreicated!
Without doing all the work for you something like this should work.
Will need some styling from here, suggest looking at http://www.codecademy.com/
HTML
<footer>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<ul class="left">
<li>About</li>
<li>Get to know John</li>
<li>Moon Lit Disco's</li>
</ul>
<div class="clearLeft">
<p>Logo / site design: Trey Taylor and Charlie Wubs</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
CSS
.left{
float:left;
}
.clearLeft{
clear:left;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
Should get you started :)
If you want the text not to be underlined, then you need to style the anchor.
Example:
footer a {
text-decoration:none;
}
.footer_link a {
font-size:1em;
}
Since your footer is an HTML5 element, you don't really need an ID of #footer. Semantically, anyway.
You also don't need spans. You can just use the parent class to style the font size.
You're also missing a closing paragraph tag, which might be why it's not taking the paragraph styles.
Cleaning up your code, your HTML should be more like this (head area is removed, but it's fine):
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header></header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav></nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p"></section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options"></section>
<!-- end images for: THIS PAGE ONLY --->
<!-- footer for: ALL PAGES --->
<footer>
<div class="column">
<p class="footer_heading">About</p>
<ul>
<li>Get to Know John
</li>
<li>Moon Lit Disco's
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Terms and Policies</p>
<ul>
<li>Cookie Policy
</li>
<li>Terms and Conditions
</li>
<li>Privacy Policy
</li>
<li>Copyright and Trademark
</li>
</ul>
</div>
<div class="column">
<p class="footer_heading">Website</p>
<ul>
<li> Feedback
</li>
</ul>
</div>
<div id="copyright">
<p>Logo / site design: Trey Taylor and Charlie Wubs
</p>
<p>© 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>
</body>
And CSS:
.column {
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
float:left;
margin-right:13px;
width:30%;
}
.column a {
text-decoration: none;
color:black;
}
.column ul {
list-style:none;
margin-left:-40px;
}
.footer_heading {
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
}
#copyright {
clear:both;
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}
#copyright a {
text-decoration:none;
color:black;
}
See Fiddle: http://jsfiddle.net/v6o9wg43/
For some reason my background color does not cover the entire page width on my mobile device, However, it looks fine on a regular desktop. I cannot find the problem.
Here is my style.css:
#media only screen and (min-width : 250px) and (max-width : 780px)
{
#pageHeader{
border:none;
background-color:"background-color:#F5F5DC";
}
#pageHeader nav {
height:300px;
width:100%;
}
#pageHeader nav ul {
padding-left:0;
width:100%;
}
#pageHeader nav ul li {
width:100%;
text-align:center;
margin-left:25px;;
}
#pageheader nav a:link, #pageHeader nav a:visited {
height: 60px;
padding: 5px 23px;
text-decoration: none;
dislay: block;
width:100%;
}
#pageHeader img{
width: 100%;
height: auto;
margin-bottom: 3%;
}
}
Here is my html:
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<div id="pageHeader" style="background-color:#F5F5DC">
<img src="style/logo.jpg" name="logo" width="431" height="94" alt=""/>
<br />
<br />
<nav>
<ul>
<li >Home</li>
<li style="margin-left:25px">All Products</li>
<li style="margin-left:25px">Blog Using Ruby</li>
<li style="margin-left:25px">User Javascript Page</li>
<li style="margin-left:25px">Submit Concerns using Perl</li>
<li class="active" style="margin-left:25px">About Us using HTML5</li>
<li style="margin-left:25px">Asp Help Pages</li>
<li style="margin-left:25px;"><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
</nav>
</div>
</div>
<h1 align="center">About Us</h1> </br> </br>
<div align="center" id="pageBody">
<table width="100%" border="0" cellpadding="6">
<tbody>
<tr>
<td> Code omitted </td>
</tr>
</tbody>
</table>
<div id="pageFooter">
Copyright |Admin Log In
</div>
</div>
</body>
</html>
Look that you have an extra tag when you close your
<div id="pageHeader" style="background-color:#F5F5DC">
If you are using more code, and floating some tags, dont forget to put the "overflow:hidden" in the container that "contains" the tags floated!
Remove the explicit height on the nav element - let the flow content dictate that rather than setting it explicitly. If you clear fix the floats in the unordered list using the CSS-
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
(See http://css-tricks.com/snippets/css/clear-fix/)
The list will take the height of its contents.
You will also want to remove the margin left on the list item elements (these are at 100% plus the 25px margin), replacing it with padding-left and setting box-sizing: border-box on the list items (or just set the margin to zero when at a smaller viewport width as your design doesn't seem to need it).
The unordered list will need to look something like this-
<ul class="group">
<li>Home</li>
<li>All Products</li>
<li>Blog Using Ruby</li>
<li>User Javascript Page</li>
<li>Submit Concerns using Perl</li>
<li class="active">About Us using HTML5</li>
<li>Asp Help Pages</li>
<li><img src="style/cartimage.jpg" name="shopping cart" /></li>
</ul>
In either case you should remove the inline margin-left: 25px styles - you will find it much more maintainable to keep these externally in your CSS.
Please i need help , im having problems ok first is my bacground image is not showing centerd in firefox or IE but in chrome it works fine and SECOND i ahve amenu and i cant get it to display ontop of my background picture: Below i have pasted my Html code and my css please help me and have a look i would really appreciate it....
<html>
<head>
<title>Just something</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/css.css" type="text/css" media="screen"/>
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="bcg_files/css3menu1/style.css" type="text/css" />
<!-- End css3menu.com HEAD section -->
</head>
<body align="center" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="wrapper" >
<div id="menu" class="menu" style="z-index:900;">
<ul id="css3menu1" class="topmenu">
<li class="topfirst">
Home
</li>
<li class="topmenu">
<a href="#" title="Product Information" style="height:15px;line-height:15px;">
<span>Product Information</span>
</a>
<ul>
<li class="subfirst">MAXOFIX</li>
<li>Splicing</li>
<li>Sidewalls</li>
<li>Cleats</li>
<li>Basebelts</li>
<li>Accessories</li>
</ul>
</li>
<li class="topmenu">
<a href="#" title="Downloads" style="height:15px;line-height:15px;">
<span>Downloads</span>
</a>
<ul>
<li class="subfirst">Catalogues</li>
<li>Mobile App.</li>
<li>Enquiries</li>
</ul>
</li>
<li class="toplast">Contacts</li>
</ul>
</div>
<!--This where the menu will start -->
<!--img src="ok heres my img" style="z-index:3;" align="middle" width="864" height="1152" alt=""-->
<!-- The following Div's are for te boxes at the bottom of the page
you can edit the text in the paragraph just as you want for the
the ease of editing........lol -->
<!-- box left-->
<div id="cc_content1" class="cc_content1">
<!--span id="cc_back" class="cc_back"><< Go back</span-->
<div class="cc_content_1">
<h1>Advantages:</h1>
<p>
Space-saving Inclines of up to <br />
90(and then that small 0) possible.<br />
Belts are easy on material<br />
transported.<br />
Direction of feed and dis-<br />
charge can be different.
<br /><br />
More...
</p>
</div>
</div>
<!--This ends box to the far left -->
<!-- box mid-->
<div id="cc_content" class="cc_content">
<!--span id="cc_back" class="cc_back"><< Go back</span-->
<div class="cc_content_1">
<h1>Products:</h1>
<p>
Space-saving Inclines of up to <br />
90(and then that small 0) possible.<br />
Belts are easy on material<br />
transported.<br />
Direction of feed and dis-<br />
charge can be different.
<br /><br />
More...
</p>
</div>
</div>
<!--This ends box in the midd -->
<!-- box right-->
<div id="cc_content2" class="cc_content2">
<!--span id="cc_back" class="cc_back"><< Go back</span-->
<div class="cc_content_1">
<h1>News:</h1>
<p> Space-saving Inclines of up to <br />
90(and then that small 0) possible.<br />
Belts are easy on material<br />
transported.<br />
Direction of feed and dis-<br />
charge can be different.
<br /><br />
More...
</p>
</div>
</div>
<!--This ends box far right -->
</div>
</body>
</html>
HERE IS MY CSS
/* this is for the main page */
/*this is for the menu*/
.menu
{
align:center;
left:567px;
}
/*This is for the boxes at the bottom of the pag*/
.cc_content
{
width:233px;
height:236px;
/*border-bottom:1px solid #000;*/
position:absolute;
left:567px;
overflow:hidden;
/*-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;*/
top:876px;
}
.cc_content1
{
width:233px;
height:236px;
/*border-bottom:1px solid #000;*/
position:absolute;
left:328px;
overflow:hidden;
/*-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;*/
top: 876px;
}
.cc_content2
{
width:233px;
height:236px;
/*border-bottom:1px solid #000;*/
position:absolute;
left:806px;
overflow:hidden;
/*-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;*/
top: 876px;
}
/*This is for the content of the boxes exept the Header*/
.cc_content p
{
background:none;
text-align:left;
padding-left:15px;
}
.cc_content1 p
{
background:none;
text-align:left;
padding-left:15px;
}
.cc_content2 p
{
background:none;
text-align:left;
padding-left:15px;
}
/*This is for the Header of the boxes*/
.cc_content h1
{
text-align:left;
padding-left:15px;
}
.cc_content1 h1
{
text-align:left;
padding-left:15px;
}
.cc_content2 h1
{
text-align:left;
padding-left:15px;
}
I HAVE A CUSTOM CSS3 MENU BUT I DONT THINK THAT IS THE PROBLEM..
z-index is ignored unless the div is position: relative or absolute, make sure it is one of these otherwise the z-index is pointless
I am at a total loss here, I have two lists floating in the masthead of my site next to the logo that display information and stats of the current user logged in.
Masthead ______________________________________________________
| Navbar_________________________________________ |
| logo | | |
| |linklist leftside linklist rightside | |
| | | |
| |_______________________________________________| |
| |
|_______________________________________________________________|
My Html and CSS are straitforward, however for some reason, the lists will not show in IE9. They show perfectly in Firefox and Chrome. I have been pulling my hair out trying to get them to show up. I can see the very top of a few of the words in my lists but they cut off afterwards. I'm not sure if it has something to do with an overflow problem or maybe my if statements are a bit off, but I don't see how there's a problem if they show up fine in other browsers.
The Html:
<div class="masthead">
<div class="inner">
<div id="site-description">
{SITE_LOGO_IMG}
<h1>{SITENAME}</h1>
</div>
<div class="navbar">
<div class="inner">
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
<fieldset class="quick-login">
<label for="username">{L_USERNAME}:</label> <input type="text"
name="username" id="username" size="10" class="inputbox" title="
{L_USERNAME}" />
<br/>
<label for="password">{L_PASSWORD}:</label> <input type="password"
name="password" id="password" size="10" class="inputbox" title="
{L_PASSWORD}" />
<br/>
<!-- IF S_AUTOLOGIN_ENABLED -->
<label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin"
id="autologin" /></label>
<!-- ENDIF -->
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
{S_LOGIN_REDIRECT}
</fieldset>
</form>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="logout">
<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">
{L_LOGIN_LOGOUT}</a>
</li>
<li class="ucp">
{L_PROFILE}
</li>
<li class="pm">
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}
</a>)<!-- ENDIF -->
</li>
<li class="posts">
<!-- IF S_DISPLAY_SEARCH -->
{L_SEARCH_SELF}
<!-- ENDIF -->
</li>
<li class="permissions">
<!-- IF U_RESTORE_PERMISSIONS -->
{L_RESTORE_PERMISSIONS}
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->
<ul class="linklist rightside">
<li class="visit">
<!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF -->
</li>
<li class="time">
<!-- IF U_MCP -->{CURRENT_TIME} [ <a href="{U_MCP}">{L_MCP}
</a> ]<!--
ELSEIF S_USER_LOGGED_IN -->{CURRENT_TIME}<!-- ENDIF-->
</li>
<li class="faq">
{L_FAQ}
</li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST -->
<li class="members"><a href="{U_MEMBERLIST}" title="
{L_MEMBERLIST_EXPLAIN}">
{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul>
</div>
</div>
</div>
</div>
The CSS:
#logo {
float: left;
width: auto;
margin-top: -60px;
margin-left: 20px;
}
.masthead {
color: #FFFFFF;
margin-bottom: 0px;
margin-top: 25px;
width: 96%;
min-width: 650px;
margin-right: auto;
margin-left: auto;
height: 130px;
background-repeat: repeat-x;
background-position: 0 0;
}
.navbar {
padding-right: 10px;
padding-left: 10px;
margin-top: 0px;
margin-bottom: auto;
margin-left: 480px;
margin-right: 20px;
height: 86px;
}
.linklist.leftside {
float:left;
text-align: left;
list-style-type: none;
display: inline;
}
.linklist.rightside {
float:right;
text-align: right;
list-style-type: none;
margin-left: 20px;
display: inline;
}
I'm more focused on the CSS, I don't think the problem is with my Html although I could be dead wrong. Any suggestions would be highly appreciated, thanks!
Have you declared your doc type at the top of the page? IE needs this...
Not Sure but try this update
.navbar { float:right; padding:0px 10px; margin: 0px 20px 0 0; background:blue;
width:60%; overflow:hidden;}
/**/
}
Adjust the required width.
Try to avoid using height it might clip the extended data + avoid playing with margin, it worsen the job with browser compatibility, even with non conventional browsers
It should work...