Difference Between Chrome and Firefox

Discussion in 'Web Design' started by randled, Jun 30, 2012.

to remove all ads.
  1. randled

    randled New Member

    Messages:
    23
    Hi everyone,

    I've run into an interesting problem that I can't figure out; hence the reason I'm here. :)

    For school, I've created an index.shtml page and am using CSS to make it look nice. Unfortunately, my wrapper div has stopped at a certain point in Chrome. What's strange to me, is when I view the site in Firefox the div reacts the way I want. Can someone help me understand why this would be acting this way?

    I'm quite sure I have unnecessary tags and such. I'm still learning. Positioning and such has really stumped me, no matter how much I've read online. I'll check out these forums in a little more detail to see if you guys have some good explanations that can help me.

    My ultimate goal would be to position each of the modules on the homepage side-by-side so the user wouldn't have to scroll, and to have the wrapper class surround all of the modules you see. I'm also really interested in responsive web design. That's why I've been using percentages instead of px.

    Any help that you can provide would be super awesome.

    Note: The CSS portion of my site isn't a requirement for this particular class. I just like the design aspect more so than others.

    Thanks,

    Randy

    Chrome 19.0.1084.56 (Both Mac and Win 7)

    http://velma.lakeland.usf.edu/~rdeweese/index.shtml

    Code:
    .wrapper{
    	min-height:720px;
    	max-width:85%;
    	background-color: #1a82f7;
       background-image: url("http://fc09.deviantart.net/fs71/f/2011/032/8/c/silver_gradient_by_martinsketchley-d38j4s7.jpg");
       background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
       background-image: -webkit-linear-gradient(top, #CCC, #1a82f7);
       background-image:    -moz-linear-gradient(top, #CCC, #1a82f7);
       background-image:     -ms-linear-gradient(top, #CCC, #1a82f7);
       background-image:      -o-linear-gradient(top, #CCC, #1a82f7);
       border-radius:20px;
       border:thin solid black;
       margin:0 auto;
    	}
    
    .wrapper, #form, #counter, #countersource, #insert, #mysql, #formsource{
    	padding-top:15px;
    	padding-left:15px;
    	padding-right:15px;
    	padding-bottom:10px;
    	}
     
  2. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    On line 99, you have:

    <div class="mod" id"mod5">

    Replace with:

    <div class="mod" id="mod5">

    Then (and this is where you error is):

    Remove your max-height: 95% property from line 124 in mod3styles.css. I just checked in Chrome's inspector and that fixed the problem

    Hope this helps

    -Louis
     
  3. randled

    randled New Member

    Messages:
    23
    Thank you so much!

    I can't believe I didn't think about that. My mind was stuck on the new concept that learned about responsive web design and didn't think to remove that. The page looks much better thanks to you!

    I really do appreciate it.

    Do you have any tips on how to make those mod divs appear side-by-side to eliminate the long scroll?

    _Randy
     
  4. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    I haven't looked at the website yet but putting them side by side would be accomplished with CSS Floats.
     
  5. randled

    randled New Member

    Messages:
    23
    float: left and float: right

    Correct?

    I'm using that, but apparently it's not working the way I would expect.

    Thanks for that article. I'm going to read that right now.
     
  6. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    that would be float right and then float left
    or float left float left

    but float left float right doesnt work how your head might think!
     
  7. randled

    randled New Member

    Messages:
    23
    I guess I've got a lot more reading to do. CSS positioning and floats really confuse me. This is what I have for each of the mod div on my home page, but they are staying in a single line down the page.

    Code:
    #mod2 #mod3 #mod4 #mod5{
    	float:left;
    	overflow:hidden;
    	max-width:45%;
    	height: 30%;
    }
    
    #mod6 #mod7 #mod8{
    	float:right;
    	overflow:hidden;
    	max-width:45%;
    	height:30%
    }
     
  8. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    If you want mod2 to show up to the right of mod1 then you should float them both left and put mod1 in the html before mod2. Basically float:left pushes it to the left then looks to the next piece and wants to place that piece just to the right of whatever was previously floated left. If you then float it right then for some reason that's not going to work because I think float: right works in the backwards order from float left. To be honest I don't quite understand this that well myself and tend to just always use float: left :p
     
  9. randled

    randled New Member

    Messages:
    23
    I get what you're saying and I actually understand that logic.

    Allow me to elaborate and you tell me your thoughts (if you'd be so kind :) )

    I have 7 modules (2 through 7) and a project. I would like them to be in two columns down the page. I tried changing them to just float:left, like you said and moving the html around to see what they would do, and nothing. They stayed in line. This is quite the conundrum for myself. Maybe I should be an ultimate noob and just put them in a borderless table. lol

    Update: I changed my CSS to float:left the .mod and this put them in the two columns. Now when I try to make them all even, my wrapper div shrinks and they all go back to a line down the page. This is a little frustrating, but a cool learning experience. The weird thing is, this isn't even required for my class. I'm just a stickler for making my work look good.
     
    Last edited: Jul 2, 2012
  10. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    It may be extra bloat (and im sure someone will tell me this too)
    But float:left;display:inline;position:relative; always makes floating elements behave as i want them too. A width is always helpful too, particularly with ie6-8 which doesnt recognise min/max widths.
    overflow:hidden goes on your container.
     
  11. randled

    randled New Member

    Messages:
    23
    It does. I want my .wrapper to have the border around it and the contents of the .wrapper to have the space around them as well. Would it be more appropriate to make the mod divs total 100% and then add margin:25px ?
     
    Last edited by a moderator: Jul 2, 2012
  12. randled

    randled New Member

    Messages:
    23
    That single statement helped a ton. All of my mods now fit within my .wrapper.

    Thanks!
     
  13. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    NO NO NO NO NO NO NO NO NO


    Okay now that that is out of the way ;) It sounds like you want two vertical columns with those 2-7 mods. If that's the case you can either float them all left and then use margins and widths to get them into the two columns (floats will wrap if you exceed the width of the container with overflow:hidden;) or you can put all the ones you want floated left in a div and all the ones you want floated right in a div and then just float those two divs. I wouldn't suggest the latter method because even though it's a little easier it really bloats the code.
     
  14. randled

    randled New Member

    Messages:
    23
    Yeah. I definitely didn't want to do a table. lol

    After doing the former, I added overflow:hidden, and that worked like a charm. I really like the idea of two divs and floating those. I may try that next.

    Thanks so much for all the help.

    Here's what the site looks like now:

    http://velma.lakeland.usf.edu/~rdeweese/index.shtml


    Ps,

    I found that if I shrink the site too small, the mod divs all line up again. So much for responsive web design. lol
     
  15. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    That's because your margin is in pure pixels. If you want a responsive design that margin should also be a percentage. Although in the long run you don't want to go with percentages the whole way. You should implement CSS Media Queries to find smaller widths and change accordingly.

    Typically I do my regular design with a 960 width wrapper with margin: 0 auto; then with media queries I use percentages between 960 and 650px then between 480 and 650 I hide things that are less important and get bigger with the important thing (still percentages) then lower than 480 I only show the essential info at 95% of the viewport.
     
  16. computerGeek

    computerGeek Banned

    Messages:
    212
    Chrome's way faster.
     
  17. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    :facepalm: Read the OP before you make a comment. Not just the title.
     
  18. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    It's a Povlovian sig link posting bot, probably "driven" by someone who doesn't speak or read a word of English
     
  19. amelia-t

    amelia-t New Member

    Messages:
    6
  20. randled

    randled New Member

    Messages:
    23
    My question was answered. A mod can lock down this thread if they want.
     

Share This Page