|
HTML - Can't Get My Design To Look The Same In Firefox And Ie6. Need A Second Pair Of Eyes
Hello!
I am so confused. I have built this page and it looks great in Firefox! But in Explorer 6 the border, my css container, is bigger than the table I have built to organize my information. I was wondering if someone would take a look at the code and help me identify what I might have done wrong. Here is the site address: https://maxwho.com/mm5/merchant.mvc?...S&Store_Code=M The CSS is embedded in the page so if you view source, you can see the code. Similar TutorialsOn this page: http://billboardfamily.com/?page_id=2 the line above "Height 3'0" under "Layne Martin" in the BOTTOM LEFT table is missing. I can't see the error int he code causing this. Can anyone help me out? Thanks. hey guys, i am working for a few hours on my website project (design part), but still don't get it work correctly. This is what it should look like: http://www.jarisch.net/faz/img/4_5.png And this is the current version: http://www.jarisch.net/faz how can i prevent firefox and opera from making spaces between some images as well as from making spaces between the outer images and the borders (top and bottom)? thanks a lot.. amoun Ok I need to take things like this forum: http://lmiinc.com/forum/ http://lmiinc.com/forum/calendar.php And make it active on the new site I'm building for LMI. So what files exactly do I need to copy to the new directory & then reference as a link in my navigation bar in all of my .html files? need the wrap to touch the bottom of the browser, not just the top... I've looked it over and I must be looking over something... a new set of eyes should do the trick, thanks to anyone who helps! http://www.pzfantasyfootball.com html for homepage: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>PZ Productions Fantasy Football</title> <link href="style.css" type="text/css" rel="stylesheet" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta name="keywords" content="fantasy football, nfl, sports, drafts, drafting, draft, rankings, awards, standings, leagues, players, teams, starters, " /> <meta name="description" content="Fantasy site made to help maximize your fantasy season as well as enhance your fantasy football experience." /> <meta http-equiv="Content-Language" content="EN" /> <meta name="author" content="PZ" /> <meta name="distribution" content="Global" /> <meta name="copyright" content="All content and images are copyright PZ Productions." /> <meta name="robots" content="FOLLOW,INDEX" /> </head> <body> <div id="wrap" class="cfx"> <div id="mid"> <div id="navigation"> <ul> <li>» <a href="index.shtml">HOME</a></li> <li>» <a href="latestnews.shtml">LATEST NEWS</a></li> <li>» <a href="fantasyinfo.shtml">FANTASY INFO</a></li> <li>» <a href="nflnews.shtml">NFL NEWS</a></li> <li>» <a href="chat.shtml">CHATROOM</a></li> <li>» <a href="helpfulsites.shtml">HELPFUL SITES</a></li> </ul> </div> <div id="sitenews"> <div class="newstext">PZ Productions fantasy football is a personal site used to keep track and add more depth to the fantasy season of leagues held by myself and my friends. As you can see there are two leagues... however they're not directly connected. This site will provide comparisons between the two leagues, but in no way are the leagues going to intertwine. Along with standings, depth charts, records, and the such for the fantasy leagues, I'll try to offer week by week analysis of the upcoming games, touch up on the latest football news, and basically anything else impacting the fantasy football season. I hope you all enjoy the new look and feel of the site. <p /><strong>Hot Info - Yahoo! Opens Fantasy Football Registration</strong> <br />Yahoo! has finally opened their fantasy football registration so let's get moving! It's time to hit up some drafts and see how the early goings get going. I love doing as many drafts as possible in order to give you all the best info on who's going when! In the next week come back to check up on players picked too early and players picked too late. You'll know exactly what to do come draft day, just stick with us! </div> </div> <div id="sitepoll"><div class="feedtext"> <script src="http://feeds.feedburner.com/pzpff?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/pzpff"></a><br/>Powered by FeedBurner</p> </noscript> </div></div> </div> <div id="bot"> <div id="fantasy"> <table> <tr> <td><a href="/test/mwffl/standings.shtml">STANDINGS</a></td> <td><a href="#">SCORES</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> <td><a href="#">SCHEDULE</a></td> </tr><tr> <td><a href="#">TEAMS</a></td> <td><a href="#">AWARDS</a></td> </tr> <tr> <td colspan="2"><a href="mwffl">OFFICIAL PAGE</a></td> </tr> </table> </div> <div id="gamers"> <table> <tr> <td><a href="#">STANDINGS</a></td> <td><a href="#">SCORES</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> <td><a href="#">SCHEDULE</a></td> </tr><tr> <td><a href="#">TEAMS</a></td> <td><a href="#">AWARDS</a></td> </tr> <tr> <td colspan="2"><a href="#">OFFICIAL PAGE</a></td> </tr> </table> </div> <div id="fansites"> <table> <tr> <td><a href="#">STANDINGS</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> </tr><tr> <td><a href="#">AWARDS</a></td> </tr><tr> <td><a href="#">OFFICIAL PAGE</a></td> </tr> </table> </div> </div> </div> </body> </html> The CSS: Code: * {margin: 0; padding: 0;}
p {margin-top: 10px}
html, body {
margin: 0;
padding: 0;
font: normal 12px "Century Gothic", tahoma, arial, trebuchet ms, verdana, times new roman;
color: #000;
background-color: #000;
}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.justify {text-align: justify;}
.border {border: 1px solid #000;}
#wrap {
width: 1000px;
margin: 0 auto;
padding: 0;
background-color: #fff;
}
#top {
width: 100%;
height: 150px;
float: left;
}
#header {
width: 100%;
height: 150px;
background-image: url(/images/headertitle.jpg);
background-repeat: no-repeat;
z-index: 2;
}
#tomlinson {
width: 100%;
height: 149px;
text-align: right;
z-index: 1;
}
#mid {
width: 100%;
height: 400px;
float: left;
}
#navigation {
width: 200px;
height: 100%;
float: left;
background-image: url(/images/leftnav.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#navigation ul {
margin: 60px 0 0 20px;
list-style-type: none;
}
#navigation li {
height: 20px;
font-size: 14px;
}
#navigation a, #navigation a:visited {
color: #000;
text-decoration: none;
}
#navigation a:active, #navigation a:hover {
color: #11628d;
text-decoration: none;
}
#sitenews {
width: 600px;
height: 400px;
background-image: url(/images/content.gif);
background-repeat: no-repeat;
float: left;
}
#chat {
width: 600px;
height: 400px;
background-image: url(/images/chatcontent.gif);
background-repeat: no-repeat;
float: left;
}
#sitenews ul {
margin: 10px 0 10px 20px;
}
.newstext {
width: 560px;
height: 265px;
margin: 60px 0 0 20px;
font-size: 12px;
color: #000;
line-height: 16px;
}
.infobox {
width: 164px;
height: 230px;
float: left;
border: 1px solid #ccc;
margin-left: 6px;
padding: 6px;
text-align: center;
background-image: url(/images/lightsilverbg.gif);
overflow: auto;
}
#sitepoll {
width: 200px;
height: 400px;
float: left;
background-image: url(/images/rightnav.gif);
background-repeat: no-repeat;
}
.feedtext {
width: 180px;
margin-top: 60px;
font-family: "Century Gothic", tahoma, arial;
text-align: center;
}
.feedtext a, .feedtext a:visited, .feedtext a:active {
color: #11628d;
text-decoration: none;
}
.feedtext a:hover {
color: #11628d;
text-decoration: underline;
}
.feedtext li {
padding-bottom: 3px;
text-align: left;
}
.feedtext ul {
list-style-type: none;
margin-left: 20px;
}
#bot {
width: 100%;
height: 250px;
float: left;
}
#fantasy {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/wolfpacsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#fantasy a, #fantasy a:visited {
color: #000;
text-decoration: none;
}
#fantasy a:active, #fantasy a:hover {
color: #a20707;
text-decoration: none;
}
#fantasy td {
text-align: center;
height: 30px;
font-size: 14px;
}
#fantasy table {
margin: 68px auto;
height: 120px;
width: 300px;
}
#gamers {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/pzpfflsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#gamers a, #gamers a:visited {
color: #000;
text-decoration: none;
}
#gamers a:active, #gamers a:hover {
color: #079017;
text-decoration: none;
}
#gamers td {
text-align: center;
height: 30px;
font-size: 14px;
}
#gamers table {
margin: 68px auto;
height: 120px;
width: 300px;
}
#fansites {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/globalsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#fansites a, #fansites a:visited {
color: #000;
text-decoration: none;
}
#fansites a:active, #fansites a:hover {
color: #90076e;
text-decoration: none;
}
#fansites td {
text-align: center;
height: 30px;
font-size: 14px;
}
#fansites table {
margin: 68px auto;
height: 120px;
width: 300px;
}
.cfx:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#footer {
width: 100%;
height: 50px;
float: left;
margin: 0;
padding: 0;
}
.cfx {display: inline-table;}
* html .cfx {height: 1%;}
.cfx {display: block;}
I know HTML pretty good and I can get by w/ CSS - but what else should I know for web design? Hi there Sorry, i don't know if this is the correct section of the forum to put this in. What I really want to know is, how do you get webpages to look like this: http://itunes.apple.com/us/album/lov...ign-mpt=uo%3D2 Can this be done using HTML and CSS alone? I'm only referring to the design part of it, not what the page is able to do. Like play songs for example. Thanks Jackie xxx Hey guys, This is my problem...---> http://triplestarnews.com/needhelp.jpg the original code is found on this page http://triplestarnews.com/main any ideas?? thanks! Eric Confusing Pop up messages Poor load time Over use of Java Poor overall appearance Poor use of HTML tables Spelling/Grammar mistakes Poor organization Inconsistent page design No contact information No 'about us' page No privacy policy Different backgrounds on each page Poor content Poor navigation Over powering music set to auto play Broken HTML code links and graphics Poor browser compatibility Large slow loading graphics Too many graphics Large Welcome banners Flashing banners Pages scrolling to oblivion Multiple colored text Multiple use of animated graphics Text difficult to read Animated bullets ............................................................................. Hi My latest design is 2 columns one for navigation the second for content. My problem is with positioning. I want to be able to add an image at the bottom of the navigation column which will always be at teh bootom no matter how big the content area grows. The idea is my navigation will be at the top and the image or possibly images will be at the bottom. Is there an easy way around this with CSS? i could use tables and have it align to bottom but i don't want to use tables if possible. Any suggestions would be appreciated as the design is almost finished and i hope to make a start on coding this afternoon. I will post the example code soon for you guys to see how i've put it together and hopefully will just be able to change one line or somthing for me. CC_DESIGN Can any one help me how to design web for mobile. I design a web by Frontpage, look beautiful in PC but can not read in mobile. Thanks in advance Hi, I would like to design a table just like in the Image. I am new to web design. I also want to display the text same as the one in the image, ie., Vertical text.. Can someone please help me out. Thanks Rajagopalan. Its Look: Your site looks fresh and modern, while maintaining the same brand image you're offline. Choose the same colors for your website if you use in other marketing materials, and the same logo. The site must be visually appealing, with many interesting features, but not too finicky or distracting. The layout should be easy to understand, let visitors to the site easy to navigate to the pages they want. Put Your Customers First Thinking about search engines and how your page rank in Google is great, but there is no point if your visitors will simply click away from your site within a few seconds of landing. Your goal is to convert visitors into customers, so make sure your site is customer friendly. Keep popular items and contact information easy to find and keep multiple menus where visitors click a few links to find the information they need to bury your site structure. Do not Be spammy This follows from the above point, that your site must be designed primarily for visitors with SEO as a secondary consideration. Not stuff your pages full of keywords so that the content does not make sense. You also need to clearly send the wrong tactics such as adding a list of keywords to the bottom of your pages, and cluttering the site with too much advertising. Make it quick Online visitors want information fast, and they have no patience to wait while a large image or fancy graphics load. Make sure your pages load quickly, with key information charging first. If you have large files or videos, put them in a position where the reader can still browse the rest of the page, while the larger elements to load. If you have a Flash site to think about offering an alternative simple html link for visitors with slow Internet connection. Do your homework Think long and hard about your audience before you search Use Neat and Easy Navigation You make sure your site is browser compatible Minimize the use of images Use of white space Check for broken links Design for all Screen Resolution Typography Colors use good Layout make perfect Fast Loading web site designs. Clear Navigation. Browser Compatibility. Hey all.. I'm having a difficult time trying to figure out what to do with my header area: http://showball.com Any suggestions? If certainly needs something more then there is now, there's to much empty space. Any thoughts would be certainly welcome. I seem to be a little stymied with this one.. Thanks David Hi! I had my test webpage where i test my designs, scripts etc. working well but then my little brother change some stuff in both the html file and css file, I already fixed a lot but I don't know what's wrong now. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ComBBAT - FRC Team 21</title>
<link href="http://demo.combbat21.com/css/general.css" rel="stylesheet" type="text/css" media="screen, all"/>
<link href="http://demo.combbat21.com/css/img.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="http://demo.combbat21.com/css/print.css" rel="stylesheet" type="text/css" media="print"/>
<meta name="description" content="ComBBAT, Team 21 is a FIRST Robotics Competition team consisting of both Titusville and Astronaut Highschools in Titusville, Florida." />
<meta name="keywords" content="USFirst, robotics, titusville, brevard, florida, FRC, ASRC, boeing, FIRST, ComBBAT, team 21, govconnection, team, competition, FIRST, first," />
<meta name="author" content="Daniel Cuesta" />
<link rel="shortcut icon" type="image/x-icon" href="http://files.combbat21.com/website/images/favicon.ico" />
<!--[if IE]>
<style type="text/css">
</style>
<![endif]-->
<!--JAVASCRIPTS-->
<script type=text/javascript"" src="http://demo.combbat21.com/js/addfav.js"></script>
<script language="JavaScript1.1" src="http://demo.combbat21.com/js/slidehome.js"></script>
<script type="text/javascript" src="http://demo.combbat21.com/js/report.js"></script>
</head>
<!--|| -->
<body>
<div id="container">
<div class="br10"></div>
<div id="top">
<ul>
<li><a href="http://m.combbat21.com">mobile</a></li>
<li><a href="javascript: function('addfav')" >Bookmark us</a></li>
<li><a href="http://members.combbat21.com">login</a></li>
</ul>
</div>
<div id="header">
<a href="../../../" id="logo" title="Home"></a>
<a href="../../../" id="name" title="Home"></a>
<a href="http://usfirst.org" id="first" title="FIRST" target="_blank"></a>
</div>
<div id="navbar">
<ul>
<li><a href="http://combbat21.com" id="n1" class="active">Home</a></li>
<li><a href="first/">FIRST</a></li>
<li><a href="about/">About us</a></li>
<li><a href="multimedia/">Multimedia</a></li>
<li><a href="resources/">Resources</a></li>
<li><a href="contact/">Contact us</a></li>
</ul>
</div>
<div id="breaker"><!--
<span class="pathway">You are he </span><a href="../../../../">Combbat21.com</a>
<div id="search">
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input tabindex="3" class="txt" name="q" value="" title="Search" /><input type="image" id="searchB" name="submit" src="http://files.combbat21.com/website/images/search-button.gif"/></form>
-->
</div>
</div>
<div id="rightcol">
<ul>
<li><a href="about/">about combbat</a></li>
<li><a href="first/">about first</a></li>
<li><a href="news/">news</a></li>
<li><a href="blog/">blog</a></li>
<li><a href="calendar/">calendar</a></li>
<li><a href="donate/">donate</a></li>
<li><a href="sitemap/">sitemap</a></li>
</ul>
</div>
<div id="leftcol">
<a href="javascript:gotoshow()"><img src=".jpg" name="slide" border=0 width=100% height=100%></a>
<script>
<!--
slideshowimages("http://files.combbat21.com/website/images/slideshow/1.jpg","http://files.combbat21.com/website/images/slideshow/2.jpg","http://files.combbat21.com/website/images/slideshow/3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<noscript>In order to see the slideshow you must enable javascripts</noscript>
</div>
<div id="content">
<a href="" onClick="window.print(); return false">
<img src="http://files.combbat21.com/website/images/print.png" title="Print" alt="print button" class="tb"></a>
<h2>Welcome to combbat21.com</h2>
<p>FIRST Robotics Competition Team 21 was started in 1996 to share and expand FIRST's vision with students of Astronaut and Titusville High Schools in Titusville, Fl. Our mentors, Scott Strickland from Boeing, James Rallo from Upper Mohawk Inc, Stephen Stout from ASRC Aerospace, Kevin Cunningham from USA, and Jeff White, assist the ever-expanding team of high school students design, construct, and program a fully functional ~120 lb robot and facilitate the development of important life skills such as teamwork, communication, and leadership. </p>
</div>
<div id="sponsors">
<p>The FIRST Robotics Team 21 gracefully thanks its sponsors:</p>
<a href="" target="_blank" id="boeing"></a>
<a href="" target="_blank" id="govc"></a>
<a href="" target="_blank" id="asrc"></a>
</div>
<div id="footer">
<ul>
<li><a href="/chforum">chief delphi forum</a></li>
<li><a href="/mobile">mobile</a></li>
<li><a href="link/">link to us</a></li>
<li><a href="sitemap/">sitemap</a></li>
<li><a href="sponsorus/">sponsor us</a></li>
<li><a href="contact/">contact us</a></li>
</ul>
</div>
<div id="end">
<a href="javascript:popUp('http://www.demo.combbat21.com/report')">Report</a>
</div>
<div align="center"><!--needed for ff-->
<div id="bottom">
<p>FRC Team ComBBAT 21. Copyright © 2010. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
css:www.demo.combbat21.com/css/general.css Thanks a lot to anyone that replies. How do I begin coding a web design PSD? Any decent tutorials? I know that one could use Adobe Fireworks and slice up the images, but I don't have Fireworks. Im not so good with HTML or CSS. Can someone please help me make this layout? I will put in the contents myself I just need some div type layout. Can anyone please help me? =( . I just need the HTML file and CSS and I will use it as a template for my other pages. Thank you My website is split up into 4 parts. The top banner, the left menu, the right menu, and the center part. My left menu is floating left and my right menu is floating right. I want to add content in the center but when I do, the side menus are moved downwards. I tried floating the center but it pushed it past the left menu. Any help would be greatly appreciated. If for user to use the web browser to open the text file in local drive, read the text file contents and plot the line graph base on the data in the text file, what is the most suitable design to use ? first i think of use the php to read the dynamic data , but php request to install the appserver, too complicate for user. if i use purely html, with some plug in like flash, is it possible to read the dynamic data in the text file and plot to the flash ? please advice me, many thanks. What's the best book to learn web design please? I was leaning towards the Head First Web Design book but don't like most of the reviews on it even though I love the other Head First books, is this the best book on web design or is there any other[s] that's better? Hi: Currently, I'm making my web pages 'by hand'. That is, I use an editor, and laboriously crank out and test my pages on IE, safari, FireFox and Opera. But this is agonizingly slowwwwww ! What tools do *professional* webbers use to build sites ?? What would you folks here suggest as a useful tool for web-building that would speed up my building, but result in clean editable pages ? (btw, I'm an expert database man, but quit a neophyte in web design.) My 'forte' is building Windows business applications (Inventory, Accounting, etc, etc) using xBase database software (i.e., the xHarbour language). I can hardly wait until I can get 'behind-the-scenes' and do database work to back up my (pathetic) designs. Thanks for any hints. -Mel Smith Mesa, Arizona |
|||||||