MrAdam Posted February 21, 2007 Share Posted February 21, 2007 Hi guys!I'm working on a project for a family friend to create him a website for his part-time model company.This is the first, ever, website I've made using DIVS + CSS for layout. I have a problem now (only in IE) with the shop page. If you look at the top few models, they are slightly different aligned to the rest below. They are all printed out using PHP so I don't understand why it does it?By the way, the results ARE tables, but I was trying to get the same look with a DIV but I just couldn't get it to work.Here's the page: http://www.minimerc.co.uk/new/shop.php?c=E...amp;m=W114-W115Template for each model: <table class="model_wrap"><BR> <tr><BR> <td class="model_img"><BR> <a href="java script:pop_img('image.php?url=images/catalog/E-Class/W114-W115/F80.JPG');"><img src="<A href="http://www.minimerc.co.uk/images/catalog/E-Class/W114-W115/F80_thumb.JPG">http://www.minimerc.co.uk/images/catalog/E-Class/W114-W115/F80_thumb.JPG</A>" class="thumb" alt="Click to enlarge" /></a><BR> </td><BR> <td class="model_info"><BR> <strong>200</strong><BR> <BR> <strong>Scale:</strong> 1:43<BR> <strong>Colour:</strong> GREEN/WHITE<BR> <BR> <strong>Price:</strong> £22.50<BR> </td><BR> </tr><BR> <tr><BR> <td class="model_opt" colspan="2"><BR> <a href="shop.php?c=E-Class&m=W114-W115&id=F80">More Information</a><BR> </td><BR> </tr><BR></table> And the matching CSS: table.model_wrap<BR>{<BR> margin: 0px auto;<BR> width: 537px;<BR> border: 1px solid #DCDCDC;<BR>}</P> <P>td.model_img<BR>{<BR> width: 40%;<BR>}</P> <P>td.model_info<BR>{<BR> width: 60%;<BR>}</P> <P>td.model_opt<BR>{<BR> width: 100%;<BR> padding: 3px 5px;<BR> text-align: right;<BR> background-color: #EAEAEA;<BR>} Can anybody see why it's happening?-------------Also, I would just like to ask what people think of the layout? I know it lacks the creative edge, but I'm not too amazing at design.Thanks, Adam. Link to comment Share on other sites More sharing options...
Anders Moen Posted February 21, 2007 Share Posted February 21, 2007 I can't be bothered to find out how you can code it, but you can use this code in the <head> tag </head>:<!--[if IE]><meta http-equiv="refresh" content="0;url=for_example_to_a_folder_called_ie_users_or_something/" /><![endif]-->and there you do the things you need to do to make it look good in IE. Link to comment Share on other sites More sharing options...
MrAdam Posted February 21, 2007 Author Share Posted February 21, 2007 After posting the code it's added dozens of "<BR>" tags which make it look difficult to read. And really the problem is so small, I wouldn't bother with an alternate version.But thanks for the help. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 21, 2007 Share Posted February 21, 2007 I had a look in FF2, IE6, IE7 and Opera 9 and could see no difference what-so-ever in the image alignments.It may have been a caching issue at your end? I don't know...As for using tables for that output, if you are concerned, I have some code which would work for you, however, it may be a good experience for you to hone your html/css/php skills to convert the display into div's. It isn't difficult. The php (or asp) simply echoes out div, li, p (or whatever) tags instead of table, tr's and td's.The layout styles are then handled by CSS using a class structure similar to which you already have for the table cells.Sounds easy, huh? Link to comment Share on other sites More sharing options...
MrAdam Posted February 21, 2007 Author Share Posted February 21, 2007 lol, yeah. I knew that already - it's just I'm, well, ###### at using divs + css. But i'll figure it out.Did you think the site looked okay (depsire it being a bit bare) ?-Thanks Link to comment Share on other sites More sharing options...
jlhaslip Posted February 21, 2007 Share Posted February 21, 2007 I thought the site was coming along nicely. Bare? Never crossed my mind. I rather enjoy the plain sites. Too much distracts from the content, I find.Here is a sample of some code to review. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> Image and (3 div) Text Layout - Catalogue Display format </title><style type="text/css">/*<![CDATA[*/body{ background: #ffffff; margin: 0; padding: 0;}#wrapper { width: 48%;}#content { text-align: justify;}.detail { margin: 1em; clear:both;}img { border:none;}.image { margin: 0; padding: .4em; width: 100px; height: 100px; float:left;}.lines { padding: .25em; line-height: 20px;}.outline { border: 1px solid #999;}.sub_head { font-weight: bold; padding-left: 1em;}.class_red { color: red;}.class_blue { color: blue;}.class_green { color: green;}/*]]>*/</style> </head> <body> <div id="wrapper"> <div id="content"> <div class="detail"> <div class="image"> <a href="#" title="Description for on:hover"><img src="test.gif"alt="alternate description" title="Product description for mouse-over " width="100" /></a> </div> <div class="lines"> <span class="sub_head class_red">Product :</span> Red details here </div> <div class="lines"> <span class="sub_head class_blue">Description:</span>Blue details here </div> <div class="lines"> <span class="sub_head class_green">Availability:</span>Green details here </div> </div><!-- end class detail - this occurence --> <div class="detail"> <div class="image"> <a href="#" title="Description for on:hover"><img src="none"alt="alternate description" title="Product description for mouse-over " width="100" /></a> </div> <div class="lines"> <span class="sub_head class_red">Product :</span> Red details here </div> <div class="lines"> <span class="sub_head class_blue">Description:</span>Blue details here </div> <div class="lines"> <span class="sub_head class_green">Availability:</span>Green details here </div> </div><!-- end class detail - this occurence --> <div class="detail"> <div class="image"> <a href="#" title="Description for on:hover"><img src="test.gif"alt="alternate description" title="Product description for mouse-over " width="120" /></a> </div> <div class="lines"> <span class="sub_head class_red">Product :</span> Red details here </div> <div class="lines"> <span class="sub_head class_blue">Description:</span>Blue details here </div> <div class="lines"> <span class="sub_head class_green">Availability:</span>Green details here </div> </div><!-- end class detail - this occurence --> <div class="detail"> <div class="image"> <a href="#" title="Description for on:hover"><img src="test.gif"alt="alternate description" title="Product description for mouse-over " width="80" /></a> </div> <div class="lines"> <span class="sub_head class_red">Product :</span> Red details here </div> <div class="lines"> <span class="sub_head class_blue">Description:</span>Blue details here </div> <div class="lines"> <span class="sub_head class_green">Availability:</span>Green details here </div> </div><!-- end class detail - this occurence --> </div><!-- end id=content iv --> </div><!-- end wrapper iv here --> </body></html> Link to comment Share on other sites More sharing options...
MrAdam Posted February 22, 2007 Author Share Posted February 22, 2007 Thanks ! ... I spent 30 minutes messing round and I managed to create this..http://www.minimerc.co.uk/new/test.html- works perfect there! but when I insert it into my other page, it all messes up..http://www.minimerc.co.uk/new/shop.php?c=E...amp;m=W114-W115At least in IE it does - i haven't viewed it in firefox yet because i'm using the family computer and it's not installed.For some reason when you scroll up and down, gaps are being made in the border? has anybody else come across something like this before? Plus there's a large gap on the first model?lol - you wouldn't get this with tables.Anyways; If anyone can help it would be much appreciated.- Thanks Link to comment Share on other sites More sharing options...
justsomeguy Posted February 22, 2007 Share Posted February 22, 2007 It's kind of hard to tell what the structure is. Add this to make the different parts stand out: div.models{ margin: 0px auto; background: #FFCCCC;}div.model_wrap{ margin: 10px 0px; border-top: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; padding: 3px; background: #CCFFCC;}div.model_img{ width: 188px; height: 125px; float: left; background: #CCCCFF;}div.model_info{ background: #FFFFCC;}div.model_more{ margin-top: 3px; padding: 2px 3px; background-color: #EAEAEA; text-align: right; clear: both;} Link to comment Share on other sites More sharing options...
MrAdam Posted February 22, 2007 Author Share Posted February 22, 2007 okay done.http://www.minimerc.co.uk/new/shop.php?c=E...amp;m=W114-W115Strangely the border problem has gone, I'll add "background-colour:#FFFFFF;" later. But the big chunk is still there. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 22, 2007 Share Posted February 22, 2007 The border problem is definately an IE display bug. I never closed the window I had opened earlier, so I have the old version and the new version open in IE. If I'm looking at the old one in IE and see the border problem, then alt-tab away from it (like to the newer version), and alt-tab back to the older version, the borders look fine. If I scroll down, the borders that were previously off the screen show the problem, but again using alt-tab to switch back and forth shows the borders correctly at first, and scrolling up or down shows the holes in the borders.So that is just an IE display bug, I'm not real sure how to fix that. There's nothing in the CSS telling it to do that, so I'm not sure how to tell it not to do that.I have a sneaking suspicion that the first model_wrap box with the huge padding is also just an IE bug. Maybe try adding !important to snap IE into line, but if you can't get IE to play nice with the divs you might just have to fall back to tables. div.model_wrap{ margin: 10px 0px !important; border: 1px solid #DCDCDC; padding: 3px !important; background: #CCFFCC;} Link to comment Share on other sites More sharing options...
Skemcin Posted February 22, 2007 Share Posted February 22, 2007 OT: I looking for a 1:24 scale Silver 1979 Porsche 924 to sit next to the two full-size ones I have in the garage. Link to comment Share on other sites More sharing options...
MrAdam Posted February 22, 2007 Author Share Posted February 22, 2007 Well, I changed the background-color to white and the borders stayed fixed, but, there's still the big block. So I think I'm going to have to revert back to tables - afterall I don't want a big white chunk there.- Thanks for the help guys ! Link to comment Share on other sites More sharing options...
pulpfiction Posted February 22, 2007 Share Posted February 22, 2007 The border problem is definately an IE display bug. I never closed the window I had opened earlier, so I have the old version and the new version open in IE. If I'm looking at the old one in IE and see the border problem, then alt-tab away from it (like to the newer version), and alt-tab back to the older version, the borders look fine. If I scroll down, the borders that were previously off the screen show the problem, but again using alt-tab to switch back and forth shows the borders correctly at first, and scrolling up or down shows the holes in the bordersI tried the website and it happens like what justsomeguy has mentioned...... wierd, seems like IE has magical ways it works to render websites..... :)Also a suggestion about the site, it looks very plesent, how about you make a catchy graphical button for standard "find" button in the page.... Link to comment Share on other sites More sharing options...
justsomeguy Posted February 22, 2007 Share Posted February 22, 2007 OT: I looking for a 1:24 scale Silver 1979 Porsche 924 to sit next to the two full-size ones I have in the garage.Heres a 1:18http://www.speednation.com/store/porsche.htmlI didn't check the other 4 pages. Link to comment Share on other sites More sharing options...
MrAdam Posted February 22, 2007 Author Share Posted February 22, 2007 OT = ?Non-mercedes aren't available on the website yet - my boss is on holiday at the moment, sorting it out when he gets back.But, he does sell non-mercedes - a lot. So I would think he has a "1:24 scale Silver 1979 Porsche 924" - only i live in the UK and postage could be costly. (I don't know).I'll ask him in a day or two (when he gets back) and let ya know, unless you find one somewhere else.--------and yeah, pulpfiction, i was thinking the same thing ! :)Cheers!- Adarm Link to comment Share on other sites More sharing options...
PrateekSaxena Posted February 24, 2007 Share Posted February 24, 2007 I think the text is too close to the Car images in FF 2.0.0.1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now