I'm working on a website, and it works perfectly in Chrome/Firefox, but I'm experiencing two issues in IE8 and 9.
In IE9, the navigation menu in the header doesn't display.
In IE8, the entire header is screwed up. The title, subtitle, and navigation menu all appear above the main header image instead of on top of it. (Click here to see what it looks like).
I'm sure these are really simple fixes, I just couldn't find them. Thanks in advance.
Edit for code. HTML:
<div class="heightWrapper">
<h1 class="birthofahero"><?php bloginfo( 'name' ); ?></h1>
<h2 class="jennasue"><?php bloginfo( 'description' ); ?></h2>
<img src="/resources/images/header.jpg" alt="StartLivingNow | Inspiring a Generation" />
<nav class="topNavigationMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Media</li>
<li>Newsletter</li>
<li>Partnership</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS
.heightWrapper {
height: 100%; /* To position the navbar at the bottom of the div */
margin-bottom: -.4em; /* A magic number, for some reason. */
}
.topNavigationMenu {
float: left;
position: relative;
bottom: 3.9em;
margin-bottom: -3.9em;
z-index: 100; /* test */
}
.topNavigationMenu li, .topNavigationMenu a {
float: left;
}
.topNavigationMenu li a {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 2em;
font-weight: bold;
text-decoration: none;
color: #004080;
float: left;
padding: .2em .4em;
}
.topNavigationMenu li a:hover, .topNavigationMenu li a:active {
background-color: #004080;
color: #fff;
}
Fix for navigation menu in IE9
Apply position:relative to your heightWrapper and
Apply position:absolute to .topNavigationMenu (You already have bottom: 0 set). You should also remove the float:left from .topNavigationMenu.
As for the IE8 issues, neither header nor nav are HTML 4 elements, and IE 8 doesn't support HTML 5. Try including modernizer (http://modernizr.com/) in the head section of the page, or another HTML5 shiv. That should allow you to style them in IE7/8.
IE8
The reason is your layout. In your layout, there are 3 things:
h1
h2
menu
Now for the h's, you have used fonts not present in browers, or computers using #font-face. Internet Explorer doesn't support many CSS3 commands such as #font-face, causing your menu to be on the top.
The Solution:
Make the whole header a image and then put the menu.
IE9
I don't know but most probably the same. And don't forget about checking errors.
Related
I am trying to use Flex Boxes in order to style a nav bar on my website. I'm not sure what I'm doing wrong, but there's default properties being applied on my UL. I have attached screenshots and code snippets below.
Image of Issue (spacing)
Inherited Properties?
HTML
<body>
<div class="container">
<header class="navbar">
<img id="icon" src="logo.png" alt="logo" href="#index">
<nav>
<ul>
<li>Menu</li>
<li>Combos</li>
<li>Reservation</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
<img id="cart" src="cart.png" alt="cart" href="#cart">
</header>
</div>
</body>
CSS
* {
font-family: Montserrat, sans-serif;
text-transform: uppercase;
text-align: center;
color:white;
}
body {
background: #FF9292;
}
.container {
width: 100%;
min-height: 100vh;
padding-left: 8%;
padding-right: 8%;
box-sizing: border-box;
overflow: hidden;
}
.navbar{
margin-top: 2.5%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#icon {
width: 65px;
cursor: pointer;
}
#cart {
width: 25px;
cursor: pointer;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 14px;
}
nav ul li a:hover {
color: #3f3e3e;
}
Those are not inherited properties, but the default styles supplied by your browser, the so-called user agent stylesheet.
The styles in a user agent stylesheet are typically applied to all elements on the page, and are used to provide a basic layout and appearance for the page.
The purpose of a user agent stylesheet is to provide a consistent and predictable default appearance for web pages, so that all users have a similar experience when viewing web pages. The styles in a user agent stylesheet are typically based on the default styles provided by the World Wide Web Consortium (W3C), the organization that sets standards for the web.
User agent stylesheets can vary depending on the web browser that is being used. Different web browsers can have different default styles for the same HTML elements, so the appearance of a webpage can vary depending on which web browser is used to view it.
For example, the default font size and font family for a p element may be different in Chrome and Firefox. In Chrome, the default font size for a p element may be 16 pixels, and the default font family may be Arial, sans-serif, whereas in Firefox, the default font size for a p element may be 15 pixels, and the default font family may be Verdana, sans-serif.
You'd need to manually override those styles in your case.
To make this easier, people, especially back in the day, started using so-called "CSS Resets" which are boilerplate stylesheets that set all of those values to 0, so you have a de-facto standard without worrying about cross-browser styles and don't need to override such values.
what are you expecting from this code
if you are thinking why 'li' are aligned horizontally without adding display: flex; in 'ul' then it is because you added display:inline-block; in 'li'.
I have looked around for many solutions and I am currently redoing the code of a website I own as I had all of my CSS individually laid out on each HTML page. Eventually I had too many pages to handle, and I decided to make a stylesheet to clean it all up but my EVERYTHING was a mess. Indentation, comments, etc...
Currently, I am working on my Navigation Bar on the Website, but for some reason which I can't figure out (I've tried many things) the bar is positioned exactly in the middle which leaves a small amount of white space at the top, left and right of the bar. Here is the HTML:
ul { /* unordered list properties */
list-style-type: none; /*takes out bullet points */
margin: 0; /* scaling */
padding: 0; /* scaling */
overflow: hidden; /* clipping rules: https://www.w3schools.com/cssref/pr_pos_overflow.asp */
background-color: #0c1f2e; /* colour */
}
li { /* list item properties */
float: left; /* move item to the left */
font-size: 14px; /* set the font size to 14 pixels */
}
li a { /* vertical style */
display: block; /* display style */
color: #ffffff; /* text colour */
text-align: center; /* centres the text */
padding: 19px; /* vertical padding */
text-decoration: none; /* remove any text effects */
font-family: 'Dosis', sans-serif; /* change the font to selected font: Dosis */
}
li a:hover { /* vertical style items when hovered upon by cursor properties */
background-color: #639ddf; /* set the background colour */
font-size: 20px; /*set the font size to 20 pixels */
}
<nav> <!-- begin navigation element -->
<div id="menu"> <!-- create and start new element with the id: menu -->
<ul> <!-- begin unordered list -->
<li>Home</li><!-- list items -->
<li>Competitions</li>
<li>Builds</li>
<li>Images</li>
<li>Videos</li>
<li>Fight Club</li>
<li>Articles</li>
<li>Forums</li>
<li>Tools</li>
<li>News</li>
<li>Shop</li>
<li>Allies</li>
<li>More</li>
</ul> <!-- end the unordered list -->
</div> <!-- end the 'menu' element -->
</nav> <!-- end navigation element -->
Thanks all in advance, I hope I have provided enough info and please don't be too harsh with my over-commenting or anything just keep those opinions to yourself. As for my question structure and code, please correct me on anything I've done wrong and point out how I can fix. Thank you very much for taking your time to read this,
Is this what you're looking for?
Link to JSFiddle
If so, in your CSS. Add this
body {
margin: 0px;
}
None of the solutions I've were working for me, but I found one that did. In my CSS:
.navbar{
margin-left: -15px;
margin-right: -15px;
}
It seemed like mine had about 15 pixels of margin on just that I couldn't get away by setting the margin to 0.
It looks like the browser default css style is adding margin: 8px; to the body. To remove it add this to your css:
body {
margin: 0;
}
Setting margin on your nav to 0px and setting body padding to 0px; should works.
I tried left:0; It worked like a charm!
Right now I am fairly happy with my navigation bar and it is centered how I would like it, however instead of the white background box ending at the end of the specified width, It is running the full length of the screen, as seen at www.rebeccahenrydesign.com/about.html
Does anyone know what I can to to give it a specified length.
Here is my html
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li>Home</li>
<li>Work
<ul>
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li><a href="about.html" >About</a></li>
<li><a href="contact.html" >Contact</a>
</li>
and here is the css
.horizontalcssmenu ul{
padding: 0;
list-style-type: none;
background:white;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 2px 8px;
border: 1px white;
border-left-width: 0;
text-decoration: none;
background: white;
color: #f77bb1;
font: 20px Helvetica,sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px white;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}
/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: white;
border-width: 0 1px 1px 1px;
}
.horizontalcssmenu ul li a:hover{
background: #f77bb1;
color:white;
}
.horizontalcssmenu ul li ul li a:hover{
background: #f77bb1;
}
.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */
Please forgive me if the formatting of this post is incorrect (or if this is a stupid question). I have never coded anything before this and I have never posted on this site! Any feedback is appreciated. Thanks
Editing my answer as i look at the actual website... Also, you have some other errors that need to be corrected. Run your web page through this web site and correct the errors it indicates.
You have defined the class four times with the same name. This will not work. If you need to define four classes, they must all have different names.
http://validator.w3.org/
-----------Update-------
Okay, I fixed your problem. Here is the code, with my changes made as comments that you can delete. You should still run it through the validator, and fix problems.
The problem you asked about required setting a width and a margin in the div element. There are other things you should address, but this solves your main problem.
<!DOCTYPE html>
<html>
<head>
<!-- Declared character encoding --> <meta charset="utf-8">
<!-- Inserted required title element --> <title>About Rebecca Henry</title>
<!-- Moved link element from body to head --><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css">
<!-- Moved Script to the head element --><script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy- vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>
<body>
<h1>About Rebecca Henry</h1>
<!-- Added a width and a margin. This solves your white bar problem. --><div class="horizontalcssmenu" style="width: 556px; margin: auto">
<ul id="cssmenu1">
<li>Home</li>
<li>Work<span class="arrowdiv"> </span>
<ul style="top: 27px;">
<li>Print</li>
<li>Digital</li>
<li>Photography</li>
</ul>
</li>
<li>About</li>
<li>Contact
</li>
</ul>
</div>
<!--Split the menu from the table with separate div elements -->
<div>
<br>
<br>
<br>
<img src="images/profile.jpg" alt="Profile">
<!-- changed align center to margin auto inline style --><br><table style="width:410px; margin: auto">
<tbody><tr>
<td>
<p>
Hello Friends,
<br>
My name is Rebecca Henry and I am a Graphic
Designer out of Richmond Virginia. I love
working with different mediums, but print is
by far my favorite. Experimentation
and trial and <br> error are important factors in my work. I
try to think out of the box and try as many
things as I possibly can. The work on this site
is comprised mostly of work from my junior year
of college at Virginia Commonwealth University,
and also of the work I completed at an internship
with a local luxary car service by the name of
bioRide. I am passionate about useing my talent to help others in any way I can. My dream job would be to work with a non-profit creating meaningful work. I do not work in hopes of fame or foutune, but simply for the love of what I do. If you have any questions or comments
about the work, I am always happy to hear them.
My contact information can be found on the contact
page. I am currently a student, and always looking
for employment so please feel free to contact me
in those regards also. Thank you for visiting my page!
</p>
</td>
</tr>
</tbody></table>
<br>
<br>
<br>
<br>
<br>
</div></body></html>
Welcome aboard!
I wish you to find all the help you need on this great Q&A platform.
The "local" solution
This solution only resizes the list container. The advantage is that you can choose the width you want without impacting the rest of your page. The drawback is that whenever you add an element to your page, you have to align/size it manually.
Add this in your CSS file:
ul#cssmenu1 {
width: 580px; /* Edit this line */
margin: 0 auto;
}
The "global" solution
This solution resizes the entire page by resizing the body, which is the first displayed child element of the <html> element. The drawback is that you cannot expand your list container outside the body element (well, at least not without a hack or side effects). The advantage is that you have a consistent layout in your entire page, no matter what you add or edit in the future. Also, you can resize the entire page (if it's too small, or if you want to have a responsive version, ...) by updating just one value. That's definitely the direction I would take.
Start by resizing the entire body by adding this at the top of your CSS:
body {
width: 580px; /* Edit this line */
margin: 0 auto;
}
Now, in your HTML page, line 48, replace:
<table style="width:410px" align="center">
with the following:
<table>
Of course, I am not saying there are no other solutions, but that these two ones are the first ones that come to my mind.
Also, as Edward said in his answer, please use W3C's markup validator as using standard markup gives you - among other things - a better chance to be compliant with all sort of browsers. Results for the page you gave can be found here. Your CSS is also invalid, you can check it with the CSS validator.
This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.