Topic: Good Grief... Pages that link to <a href="https://ozoneasylum.com/backlink?for=22622" title="Pages that link to Topic: Good Grief..." rel="nofollow" >Topic: Good Grief...\

 
Author Thread
redroy
Nervous Wreck (II) Inmate

From: 1393
Insane since: Dec 2003

IP logged posted posted 07-20-2004 00:05 Edit Quote

I've just about finished a site for a client of mine and it's acting funny in IE . I don't know why, but I cannot seem to figure this out. If you go to http://www.amillionlittlethings.com (with IE of course) and check the 'Coming Soon', 'Idea Gallery', and 'Contact Us' links you'll see that the page title images and content (if any) acts as if I have a left padding set to 175px or something. The other pages are correct. It displays properly in every other browser that I've checked. I think I may need some sleep. Any help would be appreciated. Thanks. Oh... CSS is located here

70% of statistics are made up on the spot.

wcr one
Paranoid (IV) Inmate

From: seattle
Insane since: Mar 2001

IP logged posted posted 07-20-2004 01:33 Edit Quote

hey,

well the first thing I notice is that it only occurs if there is no (or small amount of) text in the content area. If the text spans the complete width of the content area it moves the image to the left.

there is also a lot of inconsistency in the coding (e.g. image sizes in some places but not in other), some css is in style sheet, other is inline when it should be in style sheet, use of deprecated tags, etc and I will spare you the lecture about using tables for layout and use of tags for presentation issues (i.e. <br>. it might be some combo of these things.

not a solution, but a place to start.

wait, this just in, try setting the width of your .maincontent to 634px (total width- left image width=634) and it all moves over for me. not really sure why.

hope that works for you too.

bill

redroy
Nervous Wreck (II) Inmate

From: 1393
Insane since: Dec 2003

IP logged posted posted 07-20-2004 02:00 Edit Quote
quote:
wcr one said:
try setting the width of your .maincontent to 634px
(total width- left image width=634) and it all moves over for me. not
really sure why.
hope that works for you too.


That did it... Thanks!

70% of statistics are made up on the spot.

jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

IP logged posted posted 07-24-2004 02:28 Edit Quote

Beautiful front end. -- tables for layout . Ick. Go CSSP!

redroy
Nervous Wreck (II) Inmate

From: 1393
Insane since: Dec 2003

IP logged posted posted 08-02-2004 00:58 Edit Quote

Don't mean to sound completely daft, but what is 'CSSP'? I'm guessing you're talking about a complete CSS layout... I'm in the process of learning this. It seems as if designers use <div> tags to accomplish it, is that the best way? Also, how is the cross browser compatabilities? Thanks

70% of statistics are made up on the spot.

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 08-02-2004 16:00 Edit Quote

You're right, in that <div>s are used [sometimes] for positioning...but really, only when it is appropriate.
<h1>, <p>, <dl>, <ul>, <address> and a whole host of other tags are also used.

The idea is you mark up your document according to *what it means*, first. Then, and only then, do you go about figuring out *how it looks*, and on what platforms and clients.

The truth is, your document is going to look differently depending upon the client (or, at least it should!) You probably do not want your documents to look the same on a PC as it does on a handheld. Nor would you like it to look the same on a printed page as it does on a cell phone.
Different platforms, different viewing environments = different views! Same document, same mark up, different looks appropriate to the medium being used.

So, your new products page, I'd probably mark up something like this:

code:
<body>

<h1>A Million Little Things</h1>

<div id='newProducts'>
<h2>New Products</h2>

<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>

<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>

<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>

<h3>Product #1</h3>
<img src='' alt='product 1' />
<p class='description'>lksl slsld dkd gkditi eke dsid diewo wwke did ekleke deid dke di deie eie skdiw aldl.</p>
</div>

<ul id='categories'>
<li><a href=''>7 Gypsies</a></li>
<li><a href=''>Autumn Leaves</a></li>
<li><a href=''>Bazzill Basics</a></li>
<li><a href=''>Chatterbox</a></li>
<li><a href=''>Creative Imaginations</a></li>
</ul>


<ul id='mainNav'>
<li><a href=''>Home</a></li>
<li><a href=''>Shopping</a></li>
<li><a href=''>What's New</a></li>
<li><a href=''>Coming Soon</a></li>
<li><a href=''>Idea Gallery</a></li>
<li><a href=''>Design Team</a></li>
<li><a href=''>About Us</a></li>
<li><a href=''>Contact Us</a></li>
</ul>

<ul id='breadcrumbNav'>
<li><a href=''>Top</a>
<ul>
<li><a href=''>Catalog</a>
<ul>
<li><a href=''>New Products</a></li>
</ul>
</li>
</ul>
</li>
</ul>

<ul id='auxNav'>
<li><a href=''>My Account</a></li>
<li><a href=''>Cart Contents</a></li>
<li><a href=''>Checkout</a></li>
</ul>

<form>
<fieldset>
<legend>Search</legend>

<label for='search'>Use keywords to find the product you are looking for.</label>
<input type='text' id='search' name='search' />

<button type='submit' name='searchSubmit'><img src='searchIcon.png' alt='search' /></button>
</fieldset>
</form>

<ul id='information'>
<li><a href=''>Shipping &amp; Returns</a></li>
<li><a href=''>Privacy Notice</a></li>
<li><a href=''>Conditions of Use</a></li>
<li><a href=''>Contact Us</a></li>
</ul>

<p id='copyright'>Copyright &copy; 2004. A Million Little Things. All rights reserved. Site by Silver Gear.</p>

</body>



Now, I did that very quickly. It's likely I left something out.
Furthermore, a lot of my decisions were semantic in nature and could be argued about till the end of time by all sorts of well-meaning and intelligent people.

For instance, should you products be listed as I have them, or as part of a <dl>?
Should all your nav be contained within one <div id='navigation'>?
Should your nav lists have <h*> before them?
In what order should your elements go in the document?

Make your own decisions on those things. That's not really the point.

Once you have your document marked-up, then you can work on styling it.
With your design, styling it "cross-browser" shouldn't be too difficult at all.
If you're interested, mark up some of your pages sematically, then come back here and ask about style and positioning. There are tons of people (I'm certainly one) who would be happy to help.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu