16 replies [Last post]
learning slowly
learning slowly's picture
Offline
newbie
usa
Last seen: 11 years 36 weeks ago
usa
Timezone: GMT-5
Joined: 2010-12-02
Posts: 10
Points: 11

Hello,

I have created a catalog page for my site.

The basic layout is done, though I may move this or that a bit - here and there.

Almost all of the borders will be removed before installation. I use them to see what's going on.

A few problems.

The pages render somewhat differently in IE and the FF brand of browsers. - especially the three fields -. the product sample, the product index and the footer navigation links. All three of these hang together – so I surmise, adjusting the top field, the product sample box would correct the second and third – only that in FF, etc the field line up pretty well.

I use the position relative for some of the fields in side of the “boxes” and align the fields inside to them – so changing one would change everything.

I've tried auto / auto to no avail. If I could do an align center that would be great.

The text “catalog” won't align in the middle of the element, which I pared down to a simple

element.

I haven't researched the problem with the links for the “site logo: and the “promo link” at the top to see why they are not showing in IE, but I surmise I will be able to discover the reason.

I also have to investigate why the mouse over is flickering on the product in the selling position.

It may be the sizing of the field it's in.

The bigger problem with the shoe is that the 'on click' java is not working to bring up the “pos-pop”
( a pop up field .)

I want to change the color of the link text in the index beneath the catalog text without changing the other links, and can't find the correct combination of id's in name combination.

http://combatkicks.com/lobby/b_military/index-b_catalog.html

CSS:

/* Default Styling */
* { margin:0; padding:0; } /* zero out padding and margins for all elements */
h1, h2, h3, h4, h5, h6, p { margin:.5em 0; } /* applies margin back to heading and paragraph elements */
.clear {clear:both;}
img { border:none; }
body {
font: 12px Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 20px 0 0 0;
text-align: center;
color: #000000;
}

/* Text Styling */
a { color:#219856; text-decoration:none; }
a:hover { color:#FF00FF; }

/*
h1 {
font-size:26px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#006633;
margin:1em 0;
}
h2 {
font-size:22px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#006633;
margin:1em 0;
}
*/
h3 {
font-size:18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #003300;
}

/*

.align-center {
text-align:center; font-size:75%;
}
table{
text-align:center;
}

*/

/* Page Styling */

#main-container {
width:800px;
background: #ffffff;
margin: 0 auto;
}

#top-container {
top:0px;
width: 780px;
height:385px;
background: #FFFFFF;
}

/* header */

#header {
position:relative;
top:-10px;
left: 0px;
padding-top:0px;
height:80px;
width:780px;
border:1px solid #000000;
}

#site-logo {
position:absolute;
top: 0px;
left: px;
width:165px;
float:left;
height: ;
z-index: 3;
border:1px solid #000000;
}

#catalog-logo {
position:absolute;
top: 0px;
left: 200px;
width: 380px;
height: ;
z-index: 8;
text-align:center; padding-top: px;
border:1px solid #000000;
}

#promo-box {
position: relative;
top: 0px;
left: 615px;
width: 165px;
z-index:4;
border:1px solid #000000;
}

#promo-link {
position:absolute;
top:-50px;
left:30px;
width:150px;
height:100px;
z-index: 70;
border:1px solid #000000;
}
/*
#promo-image {
position:absolute;
top:-10px;
left:75px;
width: 150px;
height: 180px;
z-index: 6;
border:1px solid #000000;
}
*/

/* product-sample-box */

#product-sample-box {
position:absolute;
top: 105px;
left: 111px;
width: 780px;
height:105px;
border:1px solid #000000;
display:inline;
clear:none;
text-align:center;
}

#product-link-box {
position:absolute;
top:0px;
left:0px;
width:780px;
border:1px solid #000000;
display:inline;
clear:none;
text-align:center;
list-style-type:none;
}

#product-link-1 {
position:absolute; top:0px; left:0%; width:25%; float:left; padding: 0px;
list-style-type:none;
border:1px solid #000000;
}
#product-link-2 {
position:absolute; top:0px; left:25%; width:25%; float:left; padding: 0px;
list-style-type:none;
border:1px solid #000000;
}
#product-link-3 {
position:absolute; top:0px; left:50%; width:25%; float:left; padding: 0px;
list-style-type:none;
border:1px solid #000000;
}
#product-link-4 {
position:absolute; top:0px; left:75%; width:25%; float:left; padding: 0px;
list-style-type:none;
border:1px solid #000000;
}

#catalog {
position:absolute;
top:212px;
left:350px;
width:300px;
height:15px;
background:#FBBD5D;
font-family: Arial, Helvetica, Geneva, Swiss, "SunSans Regular"; "sans serif"; color: # #F85403;
font-weight:900; font-size: 1.5em;
vertical-align:text-middle;
align:center;
border:1px solid #000000;
}

#text-link-box {
position:absolute;
top:90px;
left:0px;
width:780px;
border:1px solid #000000;
display:inline;
clear:none;
text-align:center;
list-style-type:none;
}

#text-link-1 {
position:absolute; top:0px; left:0%; width:25%; float:left; padding-left: 0px;
list-style-type:none;
border:1px solid #000000;
}
#text-link-2 {
position:absolute; top:0px; left:25%; width:25%; float:left; padding: 0px;
list-style-type:none;
border:1px solid #000000;
}
#text-link-3 {
position:absolute; top:0px; left:50%; width:25%; float:left; padding: 0px;
list-style-type:none;
border:1px solid #000000;
}
#text-link-4 {
position:absolute; top:0px; left:75%; width:25%; float:left; padding: 0px;
list-style-type:none;
border:1px solid #000000;
}

/* product index box styling */

#product-index-box {
position:absolute;
left:111px;
top:245px;
width:780px;
height:150px;
padding:0px 0px;
background:#EEF7BE;
display:inline;
clear:none;
text-align:center;

font-family: Arial, Helvetica, Geneva, Swiss, "SunSans Regular"; "sans serif"; color: # #0208F9;
font-weight:400; font-size: 1em;
border:1px solid #000000;
}
#list-1 {
position:absolute; top:0px; left:0%; width:16.67%; float:left; padding-left: 0px;
list-style-type:none;
}
#list-2 {
position:absolute; top:0px; left:16.66%; width:16.66%; float:left; padding: 0px;
list-style-type:none;
}
#list-3 {
position:absolute; top:0px; left:33.32%; width:16.66%; float:left; padding: 0px;
list-style-type:none;
}
#list-4 {
position:absolute; top:0px; left:49.98%;width:16.66%; float:left; padding: 0px;
list-style-type:none;
}
#list-5 {
position:absolute; top:0px; left:66.64%; width:16.66%; float:left; padding-right: 0px;
list-style-type:none;
}
#list-6 {
position:absolute; top:0px; left:83.33%;width:16.66%; float:left; padding-right: 0px;
list-style-type:none;
}
/* catalog */

javascript:chkSubmit()

/* Selling Position Styling */

#catalog-container {
position:relative;
top:35px;
left:0px;
width: 780px;

background: #FFFFFF;
}

#selling-position {
position:relative;
top:0px;
width:780px;
height:125px;
border: 3px solid #CCCCCC;
}
#left {
position:absolute;
top:0px;
width:33.3%;
left:0px;
float:left;
border:1px solid #000000;
}
#product{
position:relative;
top:20px;
left:0%;
width:100%
border:1px solid #000000;
}
#center {
position:absolute;
top:20px;
left:33.3%;
width:33.3%;
float:left;
text-align:center;
border:1px solid #000000;
}
#position-logo {
position:relative;
top:20px;
left:33.3;
width:33.3%;
border:1px solid #000000;
}
#instructions {
position:relative;
top:50px;
left:0%;
width:100%;
border:1px solid #000000;
}
#right {
position:absolute;
top:15px;
left:66.6%;
display:block;
width:33.3%;
float:right;
text-align:center;
border:1px solid #000000;
}
#product-name {
position:relative;
top:0px;
left:0%
width:100%;
border:1px solid #000000;
}
#sales-desk {
position:relative;
top:50px;
left:0%;
width:100%;
border:1px solid #000000;
}

#showPop {
display:none;
position:absolute;
left:100px;
top:0;
background:#fff;
padding:10px;
border:0px solid #333333;
}

/* External Page Styling */

#ext_page {
position:absolute;
left:0;
top:0;
display:none;
background:#FFFFFF;
padding:10px;
border:1px solid #333333;
}
#footer-link-box {
position:absolute;
bottom:85px;
left:119px;
width:760px;
height:20px;
background:#EEF7BE;
font-family: Arial, Helvetica, Geneva, Swiss, "SunSans Regular"; "sans serif"; color: # #0208F9;
font-weight:700; font-size: 1em;
vertical-align:text-middle;
border:1px solid #000000;
padding:0px;
display:inline;
}

#footer-link-1 {
position:absolute;
top:0px;
left:0px;
width:33.33%;
height:20px;
display:inline;
margin-top:0px;
border:1px solid #000000;
}
#footer-link-2 {
position:absolute;
top:0px;
left:33.33%;
width:33.33%;
height:20px;
display:inline;
margin-top:0px;
border:1px solid #000000;
}
#footer-link-3 {
position:absolute;
top:0px;
left:66.66%;
width:33.33%;
height:20px;
display:inline;
margin-top:0px;
border:1px solid #000000;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 4 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You have some pretty major

You have some pretty major validation errors.
You should get those cleaned up before we can really help you out.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcombatkicks.com%2Flobby%2Fb_military%2Findex-b_catalog.html

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 7 years 13 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

When you use absolute

When you use absolute positioning as you have, it takes the elements out of the normal flow of the document. There is no need to use this type of positioning in your case. In fact you could put all this data into a table. That would probably be the best solution given the type of display and data you have. Tables are only frowned upon when used for general layout.

learning slowly
learning slowly's picture
Offline
newbie
usa
Last seen: 11 years 36 weeks ago
usa
Timezone: GMT-5
Joined: 2010-12-02
Posts: 10
Points: 11

tables

Hi, that's interesting.

I just redid the basic sections of the site,which was built with tables.

My reasoning is that I would like to use the page, in one form or another, as the basis for other pages, and I find the CSS easy to style.

I did have CSS with the tables, but also used in-line style as well.

I thought this would be cleaner.

I will take the first advice and use the w3 validator and I will try using just the relative positioning from the top of the page and see what happens.

I will get back to the forum asap.

Thanks,

learning slowly
learning slowly's picture
Offline
newbie
usa
Last seen: 11 years 36 weeks ago
usa
Timezone: GMT-5
Joined: 2010-12-02
Posts: 10
Points: 11

validator

Thanks,

Guess I'm tired!

I usually validated when I was building the site three years ago.

I've just gotten back to it and skipped some steps.

I'll validate later today and get back to the forum.

Thank you.

learning slowly
learning slowly's picture
Offline
newbie
usa
Last seen: 11 years 36 weeks ago
usa
Timezone: GMT-5
Joined: 2010-12-02
Posts: 10
Points: 11

corrected code

well - corrected the code errors- one (same one four times) wouldn't correct. was the one that I had a while back, now can't figure it out:

"
Line 44, Column 83: end tag for "img" omitted, but OMITTAG NO was specified
…href="index.html#oxford">xxxxxxx

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
"

also for lines 47, 48, 50.

Have not yet redone the positioning to relative o see what that does.

---

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 7 years 13 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

You are using xhtml

You are using xhtml transitional so img tags require a closing / before the > e.g.
<img src="http://xxxxxxxxxxxxx_110.jpg" alt="xxxxxxx" />

learning slowly
learning slowly's picture
Offline
newbie
usa
Last seen: 11 years 36 weeks ago
usa
Timezone: GMT-5
Joined: 2010-12-02
Posts: 10
Points: 11

Yes - I just converted to xhtml

Yes - I just converted to xhtml,

And - I haven't fully applied the syntax.

I will applyt this change in my code.

Thank You

learning slowly
learning slowly's picture
Offline
newbie
usa
Last seen: 11 years 36 weeks ago
usa
Timezone: GMT-5
Joined: 2010-12-02
Posts: 10
Points: 11

Tried the relative for all elements, but-------

well,

Here's where I am.

I tried making all the elements “relative.”

It's a nightmare. Doesn't mean it's un-doable!

I guess I would prefer making all the “containing” elements. those I name “box”, “relative” - and all the “sub_elements” as “absolute.”

In theory this should be like a table with nested td's , etc. or divs with nested divs.

The one I have a problem with is the one called “product-index-box”.

if use relative positioning, all the

  • 's fall apart.
  • That holds true with the other elements.

    I still like using

  • 's instead of the tables from which I converted them, although, I could use the tables.
  • BTW - still couldn't find the error that suggest that there is an unclosed tag (?)

    I tried the all relative page here:

    combatkicks.com/lobby/b_military/index-b_relative.html.

    I will back at it in a couple of hours.

    thanks ----

    learning slowly
    learning slowly's picture
    Offline
    newbie
    usa
    Last seen: 11 years 36 weeks ago
    usa
    Timezone: GMT-5
    Joined: 2010-12-02
    Posts: 10
    Points: 11

    validated

    Smile
    Well,

    it's validated. (for now- anyway)

    I see that I was also confusing the self closing and regular deimiter closings as well.

    I will have to look up to what else needs to be self closed besides the img src.... /> and < /br>

    I will see what effect this has on the doc.

    (odd thing) A message continually showed that an extra div was there. I counted and searched and refresed the screen - sudenly it validated. (odd))

    thanks --

    learning slowly
    learning slowly's picture
    Offline
    newbie
    usa
    Last seen: 11 years 36 weeks ago
    usa
    Timezone: GMT-5
    Joined: 2010-12-02
    Posts: 10
    Points: 11

    Result after advice

    Okay -

    Here's where I am after some guidance:

    The page validates.

    I have tried the suggestion, but can't remove the absolute positioning without three of the fields falling

    apart:

    product-link-box
    product-index-box
    footer-box

    I would like the product index box to be positioned relative, but it is one of the fields that falls apart

    when I change the designation to relative. So, as position:absolute I have to move it farther right by

    increasing the px number - but it doesn't have the same horizontal alignment on all browsers that way.

    I have z-indexed certain elements and it doesn't work

    The first product link image won't show up as a functional link (there is no link-border around it.)

    The javascript for the product pop-up in the bottom field is broken. The mouse-over works, but not the

    on-click to bring up another screen.

    I have plaaced the catalog phrase inside the product index, but in so doing I have lost the font style. I

    removed the font styling from the product-index box and inserted it into each of the subordinate

  • 's. (I know it can be done simpler. That's for later. I'm trying to see exactly what I have at this point.)
  • I ried to use a table to hold the index, but as soon as I marked the table relative the ul/li's meged into one pile, albeit at the correct edge of the page contents(?)

    Any tips on any of these problems would be helpful.

    The link is here:
    http://combatkicks.com/lobby/b_military/index-b_catalog.html
    - and the DTD has the CSS link.

    thanks---

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 1 year 25 weeks ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    learning slowly wrote: I have

    learning slowly wrote:

    I have tried the suggestion, but can't remove the absolute positioning without three of the fields falling

    Then your whole design is broken and you should start again from the ground up.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    regia
    regia's picture
    Offline
    Enthusiast
    San Diego
    Last seen: 7 years 13 weeks ago
    San Diego
    Timezone: GMT-4
    Joined: 2010-10-24
    Posts: 313
    Points: 360

    You should not need

    You should not need positioning at all if you are setting up your page correctly, nor should you need z-index unless you have overlapping elements.

    Obviously while you have grasped css styling that is not the case for css positioning, which is why I recommended that you put the catalogue lists in a table, that's what tables are for. The main structure of your site can be positioned with css and you can style your tables with css.

    You are also confusing yourself by having a body tag and a div called body. Think of the body as your background, then use a container, give it a width and center it by using margin:0 auto;
    Inside that container, you put the header, content and footer. In the content you can put a table with the items.

    learning slowly
    learning slowly's picture
    Offline
    newbie
    usa
    Last seen: 11 years 36 weeks ago
    usa
    Timezone: GMT-5
    Joined: 2010-12-02
    Posts: 10
    Points: 11

    positioning and such

    Hello,

    Thanks for the continued interest.

    The #body{} was a holdover, and was not being used. I removed it. Just sloppy as I've been changing a bunch of stuff.

    I already have the following as the main container :

    #main-container {
    width:800px;
    height:100%;
    background: #ffffff;
    margin: 0 auto;
    padding-top:10px;
    }

    Is there too much in this? Does the extra info negate the " margin: 0 auto; " ?

    Yes. I do understand the styling much more fully than the positioning. In general I do understand that absolute positioning removes an element from the "flow" and that other elements below it won't accept its positioning for their positioning.

    I am under the impression that it is "legal" to use a relative position in a containing element and then use absolute position inside the element.

    But it seems that the next containing element feeds off of the last element, albeit embedded. I am not having this problem with the "header" element nor with the "product link" element. both of those contain absolute positioned nested elements and the they respond well to each other. Even the "footer" element aligns well to the two top elements. It is the index element with the ul/il's that won't respond.

    This, obviously is where my confusion lies. I have tried to get the info from the w3c, etc - but I guess I can't grasp it.

    I will see what I can do to eliminate the position from the containing elements, and see if that helps .

    I did try the table approach for the "index div" and I had the same problem that you see on the page right now. http://combatkicks.com/lobby/b_military/index-b_catalog.html#
    IE partially shows the "table." although misaligned and without style. FF shows a clump. As soon as I used relative positioning, it lost all the style. The "index" field falls apart. When I rename it absolute the "table displays properly- or did before some changes.

    Are you suggesting that I don't use ul/li's for the tables and stick to td's?

    I previously used the table/td approach, but I enjoy using the il/ul because it is cleaner on the page, and as I am going to use this page in many varieties and need to plug product information into it. Having less on the page makes it much easier.

    I will try creating another table outside of the page and then inserting it. I will place the new index table without any data, just sizing - and then add the data.

    The z-index is for the image at the top right, which I want to fall beneath the text.

    Actually, aside from the "div index problem" the page is now aligning the same cross browser; - and, except for a Java problem, the z-index , an irresponsive text field and the image that won't properly size, the page works.

    But, obviously with those problems it is not useable.

    Dorian
    Puzzled

    learning slowly
    learning slowly's picture
    Offline
    newbie
    usa
    Last seen: 11 years 36 weeks ago
    usa
    Timezone: GMT-5
    Joined: 2010-12-02
    Posts: 10
    Points: 11

    yes and no

    Ed, Thanks for the reply.

    I just posted a long reply below. Actually, putting aside the java and an image and a couple of styling problems that I haven't gotten to yet, , the site page is where I want it, - but obviously there are unacceptable problems in layout, mainly with positioning the field. At this point the fields are all displaying the same cross browser, an improvement -albeit that one of the field is not where it should be.

    So, without throwing out the baby with the bathwater, I will try to salvage what I can.

    I am trying to start at the top up and see that everything works as I add elements.

    It is the same element though that is giving me problems.

    Dorian

    http://combatkicks.com/lobby/b_military/index-b_catalog.html#

    Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 1 year 25 weeks ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    learning slowly wrote: So,

    learning slowly wrote:

    So, without throwing out the baby with the bathwater, I will try to salvage what I can.

    It will end up costing you a lot more time and effort to do so, and it will all likely prove wasted in the end. When you want to get to LA and you are on the road to New York, you have to turn around, not take detours.

    I might be wrong, but these are the probabilities.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    regia
    regia's picture
    Offline
    Enthusiast
    San Diego
    Last seen: 7 years 13 weeks ago
    San Diego
    Timezone: GMT-4
    Joined: 2010-10-24
    Posts: 313
    Points: 360

    learning slowly wrote: I

    learning slowly wrote:

    I already have the following as the main container :

    #main-container {
    width:800px;
    height:100%;
    background: #ffffff;
    margin: 0 auto;
    padding-top:10px;
    }

    Is there too much in this? Does the extra info negate the " margin: 0 auto; " ?
    Puzzled

    That is fine, the extra info has no influence on the other declaration.

    learning slowly wrote:

    I am under the impression that it is "legal" to use a relative position in a containing element and then use absolute position inside the element.
    Puzzled

    Quite true, otherwise the absolutely positioned div is positioned according to the viewport and not it's container. The following explanation should help
    http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    learning slowly wrote:

    The z-index is for the image at the top right, which I want to fall beneath the text.
    Puzzled

    Ever heard of background images? Put your jacket image on the background of the div containing the text, in the css not in the html.