1

I am currently building a basic website which I can use as a portfolio when attempting to enter university.

At the moment my website works in all major browsers in terms of where things are positioned with the exception of Internet Explorer and Mozilla Firefox.

I don't really know how to fix this as I have only really just started to learn programming.

My first major problem is getting the navigation the same across all browsers. The picture below shows what I want the navigation to look like:

http://gyazo.com/3688185cb79b44a0a3a4b5ce808e9f13.png

But on Internet Explorer it shows this... http://gyazo.com/fab5cec9e5842e585b1fb1773308cdcd.png (Has the CSS basically not even worked for this?)

And on Mozilla Firefox it shows this: http://gyazo.com/7c02a8ec0a7c347e417e2add9ad2cb9e.png (Why is the spacing so far apart? Also they are really far away from where the wrapper begins)

Code:

HTML:

      <nav>
        <ul>
          <li> <a href="index.html">Home</a></li>
          <li> <a href="news.html">News</a></li>
          <li> <a href="events.html">Events</a></li>
          <li> <a href="galleries.html">Galleries</a></li>
          <li> <a href="videos.html">Video </a></li>
          <li> <a href="history.html">History</a></li>
          <li> <a href="contact.html"> Contact</a></li>
        </ul>    
      </nav>

CSS:

 body {
background-image:url(../images/background/fifa14.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
 }

#wrapper {
width:1000px;
margin:0 auto;
background-color:#FFF;
 }

nav {
float:left;
position:relative;
margin-top:-115px;
margin-left:20px;
}

nav ul {
margin-right:65px;

}

nav ul li {
display:inlineblock;
margin:20%;
padding:5%;
list-style-type: none;
font-family:Segoe UI Light;
font-size:30px;
text-align: center;
width:100px;
}

nav ul li a:hover {
color:#0066FF;
font-weight:bold;
}

If there need to be more code that I may possibly need to provide then I will do so.

Thank you!

James Barrett
  • 2,757
  • 4
  • 25
  • 35
  • 1
    this is one problem that I see `nav ul li { display:inlineblock;`. It should be `inline-block`. I guess you made a typo. Note: I haven't tested, this might not fix your issue. Just that it caught my eye. – Harry Nov 16 '13 at 14:09
  • look here. this will help you ))) – Alexandru Diacov Nov 16 '13 at 14:16

2 Answers2

1

A few things.

1) You need to reset your css.

* { margin: 0; padding: 0; outline: 0; }

2) For IE pic I guess it's IE7 or IE8 ? Because I get the feeling that the "nav" element is not recognized. (nav is html5 element and IE7/IE8 don't recognize them)

3) All browsers except firefox and IE ? What is left Chrome, opera, safari (all of them webkit since now opera have opera next and dropped presto)? And if you are testing on windows since Safari dropped win support 1 year ago, you can say only opera and chrome...so 50% support of the main browser used out there...

drip
  • 12,378
  • 2
  • 30
  • 49
1

I've noticed two problems already. First, you set nav ul li to display:inlineblock; instead of display: inline-block;. That makes that element invalid. In addition, you did not perform a CSS reset. Try making a reset.css file with this code and linking to it in your HTML:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Also, Internet Explorer 8 is notorious for lacking support for certain HTML and CSS specifications, so you will need a separate stylesheet for it. To detect IE8, use something similar to this code:

<!--[if IE 8]>
    <link href="css/ie8.css" type="text/css" rel="stylesheet" />
<![endif]-->

Good luck!

Dillmo
  • 194
  • 2
  • 9