Jump to content

iPenguin

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

iPenguin's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. iPenguin
    Hello,I recently finished work on my website: http://dizin-art.comI'm on a mac so I tested my site out on the browsers that were available to me, this doesn't include Internet Explorer (since microsoft has discontinued it for the mac). It works fine in Safari, Firefox, and Omniweb, and has one slight problem in Opera where it seems it ignores a CSS height command on the nav bar (on any of the gallery pages). Unfortunately once I uploaded it to the web and tested it on a friends computer, I found that IE basically ignores almost all my CSS, resulting in an ugly mess of a page. I have a feeling that I'm going to have to use a different stylesheet for IE, but I'm fairly new to CSS and have no idea how I would go about having different stylesheets load in different browsers...I used a couple of stylesheets on the website, but the main one is: /* @group Background */body { background-color: #600;}.all { position: relative; top: 30px; padding-bottom: 70px;}#leftside { background: url(images/left.png) repeat-y; position: absolute; left: -20px; top: 10px; width: 20px; bottom: 0;}#upperleft { width: 20px; height: 15px; background: url(images/cornerupperleft.png); position: absolute; top: -5px; left: -21px;}#rightside { background: url(images/right.png) repeat-y; width: 20px; position: absolute; left: 500px; top: 10px; bottom: 0; right: 20px;}#topside { background: url(images/top.png) repeat-x; position: absolute; height: 15px; left: -1px; top: -5px; width: 480px;}#upperright { width: 20px; height: 15px; background: url(images/cornerupperright.png); position: absolute; top: -5px; left: 500px;}#bottomleft { background: url(images/cornerlowerleft.png); width: 20px; height: 15px; position: absolute; left: -21px; bottom: -15px;}#bottom { background: url(images/bottom.png) repeat-x; height: 15px; width: 501px; position: absolute; left: -1px; bottom: -15px;}#bottomright { width: 20px; height: 15px; background: url(images/cornerlowerright.png); position: absolute; bottom: -15px; left: 500px;}#contentarea { background: white; position: relative; left: 0; width: 500px; height: auto; padding-bottom: 15px;} /* @end */.title { padding-top: 20px; padding-bottom: 15px;}.img { border: solid #4f4f4f 2px; margin-right: 7px; height: 148px; margin-top: 2px;}#copydiv { position: absolute; width: 480px; bottom: 2px; margin-top: 10px;}.inactivepanel { border: 1px #1b1b1b; margin-right: 5px; height: 152px;}.img:hover { border: 2px solid #3366ff;}.contentdiv { height: 150px; margin-top: 15px;}#bottomnav { margin-top: 15px; margin-bottom: -10px;}.nav { background: #000000; display: block; font-weight: normal; width: 460px; white-space: nowrap; height: 21px;}.navcontent { background: black; color: #ffffff; text-decoration: none; margin-right: 10px; margin-left: 10px; position: relative; display: inline; font: normal 14px Verdana, Arial, Helvetica, sans-serif; padding-left: 5px; padding-right: 5px; bottom: 20px;}#navcapleft { background: url(images/navcap.png) no-repeat; width: 22px; height: 21px; position: relative; right: 231px; top: 0;}#navcapright { background: url(images/navcap.png) no-repeat; width: 22px; height: 21px; position: relative; top: 0; left: 461px;}.style1 { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; color: #999999;}a:link { color: #FFFFFF; text-decoration: none;}a:visited { color: #FFFFFF; text-decoration: none;}a:hover { color: #3366ff; text-decoration: none;}.style2 { font-family: "Helvetica Neue", Helvetica, sans-serif;; font-size: 12px; color: #333333; } And here's a the html for one of the gallery pages (http://dizin-art.com/illustrations.html): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>The Artwork of Pascal Dizin : Illustrations</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><link href="newstyle.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/thickbox.js"></script><script language="JavaScript" type="text/JavaScript"><!--function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script><meta name="keywords" content="artwork comics Pascal Dizin illustration sketches SVA"> <meta name="description" content="The portfolio website of art student Pascal Dizin. Features Comics, Illustrations, and Sketches."> </head><body><div align="center" class="all"> <div id="contentarea"> <div> <p><img src="images/illotitle.png" alt="The Artwork of Pascal Dizin" width="314" height="86" class="title"></p> <div class="nav"><div id="navcapleft"><div id="navcapright"></div></div> <div class="navcontent"><a href="index.html">Home</a></div> <div class="navcontent"><a href="comics.html">Comics</a></div> <div class="navcontent"><a href="sketches.html">Sketches</a></div><div class="navcontent"></div> <div class="navcontent"><a href="http://pdizin.blogspot.com">Blog</a></div> </div> </div> <div class="contentdiv"><a href="images/largeimages/rider.jpg" class="thickbox" rel="illustrations"><img src="images/rider.jpg" alt="rider" width="108" height="148" border="0" class="img"></a><a href="images/largeimages/Spilled-Purse.jpg" class="thickbox" rel="illustrations"><img src="images/Spilled-Purse.jpg" alt="Spilled Purse" width="113" height="148" border="0" class="img"></a><a href="images/largeimages/rainywalk.jpg" class="thickbox" rel="illustrations"><img src="images/rainywalk.jpg" alt="Rainy Walk" width="218" height="148" border="0" class="img"></a></div> <div class="contentdiv"><a href="images/largeimages/city.jpg" class="thickbox" rel="illustrations"><img src="images/city.jpg" alt="City" width="218" height="148" border="0" class="img"></a><a href="images/largeimages/pubbrawl.jpg" class="thickbox" rel="illustrations"><img src="images/pubbrawl.jpg" alt="Pub Brawl" width="100" height="148" border="0" class="img"></a> <a href="images/largeimages/suspicion.jpg" class="thickbox" rel="illustrations"><img src="images/suspicion.jpg" alt="Suspicion" width="101" height="148" border="0" class="img"></a></div> <div class="contentdiv"><a href="images/largeimages/earlymorningchores.jpg" class="thickbox" rel="illustrations"><img src="images/earlymorningchores.jpg" alt="Early Morning Chores" width="101" height="148" border="2" class="img"></a><a href="images/largeimages/Weird-World-Color.jpg" class="thickbox" rel="illustrations"><img src="images/Weird-World-Color.jpg" alt="weird world" width="211" height="148" border="0" class="img"></a><a href="images/largeimages/gag-cartoon.jpg" class="thickbox" rel="illustrations"><img src="images/gag-cartoon.jpg" alt=""Gag" cartoon" width="109" height="148" border="0" class="img"></a></div> <div class="style2" id="bottomnav">Images will open in an overlay over the current window. </div> <div class="style1" id="copydiv"> <div align="right">© Pascal Dizin </div> </div> <p align="left"> </p> <div id="leftside"></div> <div id="rightside" ></div> <div id="bottomleft"></div> <div id="bottom"></div> <div id="bottomright"></div> <div id="upperleft"></div> <div id="topside"></div> <div id="upperright"></div> </div></div></div></body></html> If anyone has a suggestions on how I could tweak this to make it more IE friendly, or if there are any other solutions that might get it to work right, please let me know! (Also any suggestions on how I could fix the Opera nav bar problem would be nice too.)Thanks!-Pascal
  2. iPenguin
    Excellent!That did the trick! Thank you so much!-iPenguin
  3. iPenguin
    Thanks jesh,I tried something like that out and it wasn't working the way I wanted... It scrolled properly but I'd prefer the bottom bar to be a fixed size. Would it be easier to keep it one size and have the top scroll if I use an image for the nav bar?Thanks again,-Pascal
  4. iPenguin
    Hello,Sorry if this is a really dumb question.. I want to have a navigation bar at the bottom of a page and have it not move, while the rest of the page scrolls. I don't want to use frames because I need the nav bar to change. Is there a way to do this using CSS? Thanks for any help you can give!-iPenguin
×
×
  • Create New...