Chrome occasionally renders my HTML/CSS differently -
i started learning html/css , trying make personal site scratch (no css tools)
when tested site in firefox , ie last night looked nice , clean seen
when tested site in chrome links got moved around:
does know happened here? markup:
<!doctype html> <html> <head> <title>home | website!</title> <style> * { padding: 0; margin: 0; } body { width: 960px; font-size: small; font-family: verdana, helvetica, arial, sans-serif; line-height: 1.6em; background-color: #fffff0; margin: 0 auto; } #header { border-style: solid; } #header img { margin: 4px 0px 0px 4px; } #header ul { list-style-type: none; display: inline; margin: 25px 30px 0px 0px; float: right; font-size: x-large; } #header ul li { display: inline; margin: 0 30px; } #header li a:link { color: #ff00ff; text-decoration: none; } #header li a:hover { text-decoration: underline; } </style> </head> <body> <div id="header"> <img src="http://i.imgur.com/ybax7y1.png" alt="temp logo!"> <ul> <li><a href="about.html">about me</a></li> <li><a href="resume.html">résumé</a></li> <li><a href="projects.html">projects</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> </body> </html>
change #header ul
css definition fromdisplay: inline;
display: inline-block;
.
Comments
Post a Comment