SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 52
  1. #26
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    the Faux column. worked for me. thanks paul however i have a slight problem when i view this page in firefox, the top blue bar shows different position in IE and different in firefox
    Last edited by HAWK; May 15, 2010 at 13:58.
    All those who wander aren't lost.

  2. #27
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE6/7/FF aren't displaying a top blue bar differently..IE6 however needs display:inline; here to fix a float drop
    Code:
    table.height{display:inline;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #28
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hey paul. as u told me to use faux column to come over the problem with equal boxes if one of them has less data. i have a problem now. in IE the box on the left side is shorter. when seen in IE 7. how can i fix this problem why is it happening?
    Last edited by HAWK; May 15, 2010 at 13:58.
    All those who wander aren't lost.

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You don't seem to have any faux column technique in that section unless I'm missing something. You have just set some heights on the table. You would need a repeating image on the container element that is the width of both tables and carries the side borders and background colours and gaps etc.

    Then you would need to draw the top borders on the table and the bottom borders would need to be on another element after the container. It's a little tricky and fiddly.

    Alternatively you could just use the absolute color overlay method as shown in my demo here.

    http://www.pmob.co.uk/search-this/ab...umns3-hide.htm

  5. #30
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    what i used in my opnion i read somewhere faux column technique using a parent column. what i did is gave one parents table class named height. in which is nested another table. with width of 100% which contain data. i see now it isn't a right approach as i thought i was done with this problem but when saw in IE 7. i was shocked. now with so many pages as lack of time. i need to fix them quick and fast.
    All those who wander aren't lost.

  6. #31
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i didn't understand. why weren't my tables weren't flowing in normal flow.like i wanted
    All those who wander aren't lost.

  7. #32
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Mind showing us where you read that faux column technique? Most likely you misunderstood the technique

    Use Pauls overlay technique (that's the easiest) or use a repeating image on a parent (to simulate the look as well)

    Use either or, there's no "quick" way to get faux columns (well faux columns are easy to begin with, but not in the way you want, I think )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #33
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    what i m using is nested table. the parent table has a class with height. the inner element is just a table with element. that is how i m overcoming faux column problem. am i going right?
    All those who wander aren't lost.

  9. #34
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you believe you are getting faux columns then by all means stick with it . You shouldn't set heights though (that's not really faux) because then if one table outgrows another, then you are SOL

    A very horrible way of using tables to get faux columns is have all the content within a <td> (a table cell) and just place all the column data / stuff into each <td> (one <td> per column)

    THat's a horrible way though and you shouldn't even be using tables unless you have tabular data.

    IMO just use Pauls link . Or overlay a graphic on a parent (repeat-y) to give the appearence
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #35
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    lol indeed its horrible : i so wanted to fix this i figured out my mistake later. that i was using with width of div that is letting element on float side less than what is total (i m so bad at maths :P) however that is old version. i fixed in the new though that's not uploaded. btw i do have a problem here, the right corner element's height of the search box do not let the heading sit just next to where it should be (connected to border) how can i fixed it?
    All those who wander aren't lost.

  11. #36
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry you are very hard to understand .

    From what I'm understanding, the header "Search" isn't connecting to the box under it. That's how I'm understanding it.

    However, upon checking IE6/7/FF, I can't see anything like that happening. It would be best to upload a screenshot (post a direct link there so I can get to it faster) and highlight where (also note which browser)

    Sorry
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #37
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    if u see the result search box (dark blue), its right corner the rounded sort of class name rightcorner. its height is affecting the search hearings like site ID, Address. (there is a white gap above it) caused by right corner div of rounded image element
    All those who wander aren't lost.

  13. #38
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah, that white gap..well that's because using offset coordinates to position things only moves an element visually but not physically, changing it below will work
    Code:
    .rightcorner{background:url(../images/tr.jpg) no-repeat right 0 ;width:8px; height:10px;position:relative; right:-12px; margin-top:-12px; float:right;}
    Make it margin-top and not top:
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #39
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah. cool thanks. wish i could get these position thingy str8 into my head i wanna be master of it like u and paul. you two are ninja's
    All those who wander aren't lost.

  15. #40
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No no. I'm the ninja. Me. Only me.

    Glad everythings sorted
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #41
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well for me applause goes to both of you. i wish u guys can teach me via pm :P
    All those who wander aren't lost.

  17. #42
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    I personally don't offer help via PM (just today I've gotten at least 4 pm's, though granted one of them was a link to a site because he didn't want it out in the open for everyone to see (was part of a thread)).

    It just gets too annoying to be frank . I don't mind helping in threads though
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #43
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i have a problem. in IE 6 when i see this page. it break box. from normal flow. what's wrong with it?
    All those who wander aren't lost.

  19. #44
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, for one thing, .upload is falling to the double float margin bug (right floated element with a right margin) so fix that up .

    Since you set a pixel width on the column, you can easily fix this by just restricting hte width on outer to the value set
    Code:
    .outer{overflow:hidden;}
    .upload{display:inline;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #45
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Actually don't use overflow:hidden. Lets get to this.

    On .upload and .Gal you set widths/margins which equal 1040px. Correct right? But then on .upload you set an extra 2px total in borders. Which is too much. Lower the width
    Code:
    .upload{display:inline;width:228px;}
    .colflow{display:inline;}
    .box{display:inline;}
    .acttrig{display:inline;}
    You really need to watch your math. I'm going through the code to have it so you don't need overflow:hidden but there is just too much to fix (almost every element needs me to count up the total width and see if it's too much/see for double float margin bugs)

    Be more careful with your coding!
    PS-That's all double float margin bug fixes (fulll code fix there)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #46
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok here is a question. my border of content is 12px with total of 1040 so if i wanna make a inner table. i would subtract 12 from left and 12 from right to get the right inside table box. i will look into in more.
    on a sidenote. i m having trouble with this page , the second column should float next to first column instead its floating down.in chorme ir look fine but in FF it is as i described.
    All those who wander aren't lost.

  22. #47
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ryan, i know lot of miscalculations are there. confusions too. i admit
    All those who wander aren't lost.

  23. #48
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So i might solved my own problem that was been told by paul and you for a long time :Pmy box is 1040 width with 12px border. that make 1040-24=1016. now i want two table one for picture and other for table information table.lets say i want my table for picture to be 320px wide and every table will have propety of 10px. having said that when i give 320px width to table a table. i have to add 20px of margin (of course not add them physical) which leaves me with 676 out of 1016. now i will subtract more 20px as part of table element propety which states that margin:10px. which leave me with 656. and that is perfect to fit in content. isn't that what box model is? correct me if i am wrong about box model or at least if i am wrong about my layout and maths
    All those who wander aren't lost.

  24. #49
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well your box you say is 1040px with 12px borders. That actually gets added on the width

    So 1040+24=1064

    Everything else is right
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #50
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks. but in post # 46. the problem is the same of widths? as u can see they are not parallel
    All those who wander aren't lost.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •