1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Google Chrome and absolute position

Discussion in 'CSS' started by Lukas, Sep 3, 2008.

0
Page 1 of 2
  1. #1
    Well, my cool all CSS drop down menu does not display right in Chrome or Safari, all other browsers it does.

    It's weird, since they say Chrome is not yet available for MAC's yet they display a site the exact same way; the UL & LI's are at the bottom of the page. Guess it serves me right for trying to SEO the page with content coming first in the code, navigation first in display but at the bottom in the code.

    Yes, I am using absolute positioning for this particular one.

    Jeez, now we need to design for 4 browsers ?
    ( IE7, IE6, Firefox and now Chrome - Yes IE6 & 7 as you know are very different)

    Mac's usually display everything OK. :D
     
    Lukas, Sep 3, 2008 IP
  2. MakeThatDollar

    MakeThatDollar Notable Member

    Messages:
    4,451
    Likes Received:
    158
    Best Answers:
    0
    Trophy Points:
    225
    #2
    I'd worry about designing for IE mainly since, what is it, 75% of users use that? I'm not sure on the exact number.
     
    MakeThatDollar, Sep 3, 2008 IP
  3. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #3
    Never, ever, ever design for IE. It is 10 years behind web standards and wrong in its implementation.
    Always, always use a modern, standards compliant browser such as Firefox, Opera, Safari and Chrome. Once you get it working there, then you can see if IE botches it up. But the quirks and bugs are known as are the hacks to fix it.

    Chrome uses the same rendering engine Safari uses.

    Never, ever, ever design to or for any browser. You write for web standards alone and test in the most standards compliant browser you can find. Coding to one browser alone will give you nothing but headaches.
     
    drhowarddrfine, Sep 3, 2008 IP
  4. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    No worries so much about Google Chrome, is very similar to Firefox, if is working in Firefox must be ok in Chrome
     
    mypsdtohtml, Sep 4, 2008 IP
  5. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #5
    Not true. Chrome uses the SAME engine as Safari, so it should always looks the same in Safari and Chrome, as the OP is reporting. Chrome is the same thing Macs use, so Chrome in not an addition to the browser testing list.

    These are the following browsers you need to test for:
    IE6
    IE7
    Opera
    Firefox
    Webkit (Safari/Chrome)
     
    blueparukia, Sep 4, 2008 IP
  6. Lukas

    Lukas Well-Known Member

    Messages:
    1,299
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    130
    #6
    OK, then I do have problems.

    can anyone help me pinpoint the error

    
#DropDown
{
	width: 780px;
	padding: 0px;
	background: #ffffff; 
	position: absolute; top: 63px; left:205px;
	margin:0px 0px 0px 0px;
	z-index:100;
}

#DropNav {
    font-family: Verdana;
	font-size: 12px;
	font-weight: normal;	
	height: 24px;
	width: auto;
	margin-left: 16px;
	clear: both;
}

#upDropnav ul {
	font-weight: normal;
	margin: 0;
	list-style: none;
	line-height: 1;
}

.tab1 {
	width: 110px;
	list-style: none;
}

#upDropnav li.space {
       height: 20px;
	width: 6px;
	padding: 0;
	margin: 0;
	border: 0;
}
    Code (markup):

    
<body class="bolo">
	<div id="wrapper">
           <div class="main">
	       <div class="content">
              </div><!-- closes content -->
            </div><!-- closes main -->
<div id="DropDown">
  <div id="DropNav">
    <ul id="upDropnav">
      <li class="tab1"><a href="#nogo">Drop A</a><ul>
          <li><a href="#nogo">Nogo</a></li>
          <li><a href="#nogo">Nada</a></li>
        </ul>
      </li>
      <li class="space"> </li>
      <li class="tab1"><a href="#nogo">Drop 1</a>
    <ul>
      <li><a href="#nogo">Nogo</a></li>
      <li><a href="#nogo">Nogo</a></li>
     </ul>
   </li>
</ul>
</div>
</div>
</div> <!-- closes wrapper -->
</body>
    HTML:
    This div is at the bottom of & in the main wrapper. It displays correctly in Firefox 2, FireFox 3, IE7, IE6 but not Safari or Chrome.

    I took out clear:both in the DropNav but no correction on browsrcamp (safari test display)


    Thanks
     
    Lukas, Sep 4, 2008 IP
  7. Ikki

    Ikki Peon

    Messages:
    474
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Lukas,

    Don't bother to code sites for Chrome yet. It's only a BETA, remember? Focus on making your sites work for IE6+, FF2+, Opera and Safari.
     
    Ikki, Sep 4, 2008 IP
  8. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Some of my css doesn't work fine in chrome. therefore my two sites looks a bit ugly.

    I don't know if the google chrome developing team will notice my post .
    I have a suggestion. I think the chrome should have a function to shift from "chrome standard mode" to "IE mode" . Therefore more user like me could explorer site with ease.

    I know chrome is going to be standard compliant, but many site doesn't have top designers and looks ugly in standard compliant browse.
    The google could keep google.com with table layout for the purpose of keeping the nice looking.
    why not have a mode of "IE mode" . It is not a problem of "face"

    I think it do help to google chrome's popularity.
     
    justinlorder, Sep 4, 2008 IP
  9. coloriteman

    coloriteman Peon

    Messages:
    669
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Its pretty new right?? still beta...lets look forward for what happens
     
    coloriteman, Sep 4, 2008 IP
  10. Ikki

    Ikki Peon

    Messages:
    474
    Likes Received:
    34
    Best Answers:
    0
    Trophy Points:
    0
    #10
    That's what I'm talking about. People should not worry about how their sites look on Chrome yet. It's only a beta version released just a few hours ago.
     
    Ikki, Sep 4, 2008 IP
  11. Lukas

    Lukas Well-Known Member

    Messages:
    1,299
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    130
    #11
    Actually, Safari is my main concern. my audience will be younger people who are prone to use MAC's.

    just found these AW stats: so, a little less worried

    MS Internet Explorer 70.5 %
    Firefox 18.9 %
    Safari 5.4 %
     
    Lukas, Sep 4, 2008 IP
  12. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #12
    Then your site is coded wrong. Chrome uses the same kit as Safari which is bleeding edge standards compliance. Show us a link.
    "Chrome standard mode" is W3C standards which every browser uses and you should be coding for. "IE mode" is some proprietary junk that doesn't work right and has screwed up the web for us developers for many years.
    Not Chromes fault. And Chrome is already as compliant as any other browser.
     
    drhowarddrfine, Sep 4, 2008 IP
  13. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #13
    The Firefox number is low. It should be 19.8% but I'm waiting to see the August number which should be significantly higher. In Europe and Asia, Firefox usage is 20% to 50%, depending on country.
     
    drhowarddrfine, Sep 4, 2008 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Oh good lord that's made of /FAIL/...

    You've got four times as many classes as needed, an absurd number of wrappers doing NOTHING - it's no wonder it doesn't work. I'd be suprised if it worked in Firefox, Opera and IE7!!!

    #DropDown and #DropNav - we can axe those flat out. They are doing NOTHING that couldn't be applied directly to the UL. Actually, that's not true, your're outer wrapper is absolute positioned, so your entire page LAYOUT is probably made of /FAIL/. (Lemme guess, going so overboard on content first SEO you are ignoring page flow?)

    I'd have to see the whole page layout before I could really make a full accessment, but 'out of the gate' I can say with full certainty half your markup and CSS goes right in the trash.

    If you have a URL to a live copy, I'm more than willing to give you the laundry list.
     
    deathshadow, Sep 4, 2008 IP
  15. jezzz

    jezzz Notable Member

    Messages:
    4,884
    Likes Received:
    190
    Best Answers:
    0
    Trophy Points:
    200
    #15
    Yeah! you are absolutely dead right for IE! standard

    Never design any site according to IE :) i use 3 browser to debug my sites now will also use CHROME!
     
    jezzz, Sep 4, 2008 IP
  16. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #16
    Chrome used WebKit the exact same as Safari. So if its broken on Chrome its broken on Safari.

     
    rochow, Sep 4, 2008 IP
  17. Lukas

    Lukas Well-Known Member

    Messages:
    1,299
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    130
    #17
    Yes, it's the code. I know.
    It is actually an attempt of duplicating the nav menu code from Monster's -j-o-b site, so the excessive mark-up may be subjective.
     
    Lukas, Sep 4, 2008 IP
  18. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #18
    A good rule of thumb is never copy markup from a big company. They have so much stuff that most if it is old and outdated.
     
    rochow, Sep 4, 2008 IP
  19. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #19
    Or modified by fifty different coders the past decade none of whom understood the original code, much less what each programmer before them did.... with each subsequent coder tacking on more and more code, wrappers, etc, NONE of them caring if thier HTML was actually HTML, planning on anyone other than themselves trying to work with it, and forgetting one of the most basic rules of writing code...

    The less code you use, the less there is to break.
     
    deathshadow, Sep 4, 2008 IP
  20. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #20
    I quite like that line, have to get people into using minimal code. It's easier, quicker, and better - no reason it shouldn't be used.
     
    rochow, Sep 4, 2008 IP
Page 1 of 2