Difference Between Chrome and Firefox

randled

New Member
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;
	}
 

LouTheDesigner

New Member
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
 

randled

New Member
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

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
 

CaldwellYSR

Member
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

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

Phreaddee

Super Moderator
Staff member
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!
 

randled

New Member
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!

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%
}
 

CaldwellYSR

Member
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%
}

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
 

randled

New Member
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

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:

Phreaddee

Super Moderator
Staff member
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.
 

randled

New Member
(Irrelevant comment [deleted] which only would have been relevant had the discussion been about pixels)

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:

CaldwellYSR

Member
Maybe I should be an ultimate noob and just put them in a borderless table.

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.
 

randled

New Member
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.

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
 

CaldwellYSR

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

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.
 

chrishirst

Well-Known Member
Staff member
It's a Povlovian sig link posting bot, probably "driven" by someone who doesn't speak or read a word of English
 
Top