| View previous topic :: View next topic |
| Author |
Message |
pollyplummer
Joined: 07 Mar 2005
Location: McMinnvillve, Oregon
|
 Posted: Sun May 15, 2005 5:42 am Post subject: <div> Problems! |
 |
|
I'm having floating div problems. This may be a simple one to correct, so I'm hoping you boys will have an answer. Um, for example, I'm building a page with this kind of tag:
< DIV style="width:50%; float:left; padding:25px;" > and another div with different content. So they're supposed to float side by side, right? Well it looks just fine with IE but Mozilla wont float them side by side. It puts them one on top of another. What to do to make my page more browser friendly? I want it to be cute. I want everyone to see it the same way. HTML is so damned picky. I'm frustrated and I feel like I am romancing the code, if you will. It won't do what I want unless I turn the lights down real low and say exactly what it wants to hear.  I guess this must be what it's like for men to woo women?
Can someone please help me with my div problems?? |
|
| Back to top |
|
 |
the saint
Joined: 09 Dec 2003
Location: not there yet...
|
| Posted: Sun May 15, 2005 5:49 am Post subject: |
|
|
you want browser friendly code? drop any kind of layering right there... that will make your life a ton simpler and also make your site a ton easier to read. You think you've got it sorted in IE and Mozilla and then some guy with a Mac send you an email... gee when does it end... give up now... 
Seriously though, good HTML is really about doing what you want in the simplest most intuitive way possible for your visitors. Why make it more complicated for yourself and your visitors than you need it to be.
When Koreans complement our site they commenting on the way that it is simply laid out and easy to navigate. "Very different from Korean sites" they tell me. I learned something there. I also saved myself some headaches learning flashy techniques that would have driven certain browsers mad. |
|
| Back to top |
|
|
jazblanc77
Joined: 22 Feb 2004
|
| Posted: Sun May 15, 2005 11:23 am Post subject: |
|
|
Try cutting and pasting this script into the head of your html coding (mine is right below my css. This will correct resizing issues with netscape and opera browsers.
| Quote: |
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function P7_OpResizeFix(a) { //v1.1 by Project VII
if(!window.opera){return;}if(!document.p7oprX){
document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
document.onmousemove=P7_OpResizeFix;
}else{if(document.p7oprX){
var k=document.p7oprX-window.innerHeight;
var j=document.p7oprY - window.innerWidth;
if(k>1 || j>1 || k<-1 || j<-1){
document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
location.reload();}}}
}
P7_OpResizeFix();
//-->
</script> |
This looks really messy because it isn't paginated but it may work wonders for correcting your layering. |
|
| Back to top |
|
|
SuperHero
Joined: 10 Dec 2003
Location: Superhero Hideout
|
| Posted: Sun May 15, 2005 1:45 pm Post subject: Re: <div> Problems! |
|
|
| pollyplummer wrote: |
I'm having floating div problems. This may be a simple one to correct, so I'm hoping you boys will have an answer. Um, for example, I'm building a page with this kind of tag:
< DIV style="width:50%; float:left; padding:25px;" > and another div with different content. So they're supposed to float side by side, right? Well it looks just fine with IE but Mozilla wont float them side by side. It puts them one on top of another. What to do to make my page more browser friendly? I want it to be cute. I want everyone to see it the same way. HTML is so damned picky. I'm frustrated and I feel like I am romancing the code, if you will. It won't do what I want unless I turn the lights down real low and say exactly what it wants to hear. I guess this must be what it's like for men to woo women?
Can someone please help me with my div problems?? |
First, IMO, your div tag should be in lowercase and second it would help to see the css for the other div.
if the second div has no css with it you may just need to add a position: relative; before your float command. That did it for me, when I was having trouble about a year ago.
If the problem pesists, could you post a link to the page. I'll be back on Dave's around 8:00 pm and could help you then. |
|
| Back to top |
|
|
SuperHero
Joined: 10 Dec 2003
Location: Superhero Hideout
|
| Posted: Sun May 15, 2005 2:31 pm Post subject: |
|
|
| One more thing, have you tried validating your CSS? If you do, and fix the errors it may resolve your problems. |
|
| Back to top |
|
|
pollyplummer
Joined: 07 Mar 2005
Location: McMinnvillve, Oregon
|
| Posted: Thu May 19, 2005 3:31 am Post subject: |
|
|
| the saint wrote: |
| you want browser friendly code? drop any kind of layering right there... that will make your life a ton simpler and also make your site a ton easier to read. You think you've got it sorted in IE and Mozilla and then some guy with a Mac send you an email... gee when does it end... give up now... |
Well, I happen to like the div property. And macs are dirty. Unless you need it for graphic design or whatever... but still, sick, why? Anyway, it's just my personal page, not something visited by millions and needing to be universal.
Thank you, gentleman for your expert advice. I'm really just a poser and not very thorough when it comes to this stuff. I had completely forgotten that there were places you could validate your CSS. Man, that was painful. I felt like someone came over and started digging through my junk closet or something. I tried all of your suggestions. The one that worked for me was the position:relative. At first I thought it didnt work, but then I tried using position:absolute with the other tag and it worked great! Here are the two tags which now work in Mozilla:
<DIV style="width:50%; position:absolute; padding:25px;">
<DIV style="width:50%; position:relative; float:right;">
Two side by side, floating div's. Oh and by the way, it doesnt matter if you capitalize div or not.
Thanks again! If you all lived in my neighborhood, I'd invite you over for beers and tuna melts. Muchos, muchos gracias.  |
|
| Back to top |
|
|
SuperHero
Joined: 10 Dec 2003
Location: Superhero Hideout
|
| Posted: Thu May 19, 2005 3:40 am Post subject: |
|
|
| pollyplummer wrote: |
| Two side by side, floating div's. Oh and by the way, it doesnt matter if you capitalize div or not. |
I know that, I just don't like it. I guess I'm old.
Anyhow, I'm glad you got it worked out. |
|
| Back to top |
|
|
The King of Kwangju
Joined: 10 Feb 2003
Location: New York City
|
| Posted: Thu May 19, 2005 10:23 am Post subject: |
|
|
| Quote: |
<DIV style="width:50%; position:absolute; padding:25px;">
<DIV style="width:50%; position:relative; float:right;"> |
Actually, you didn't quite fix your problem. What is screwing you up is the padding on the div. The div is taking 50% of the browser window plus another 50px (padding on left and right) which is pushing the other stuff around.
If you put a color on those div's you will see that the first one is still wide, and gets tucked under the second one. This is absolute positioning.
One way to solve it is to try something like
<div style="width:50%; float:left;">
<div style="width:50%; float:right;">
And then adding padding to the stuff inside the <div>'s not to the <div> itself. |
|
| Back to top |
|
|
the saint
Joined: 09 Dec 2003
Location: not there yet...
|
| Posted: Thu May 19, 2005 4:56 pm Post subject: |
|
|
| pollyplummer wrote: |
| , it's just my personal page |
sorry, I was under the impression that it was on the Internet. Silly me. At least I know the motivation for making the page in the first place then  |
|
| Back to top |
|
|
The King of Kwangju
Joined: 10 Feb 2003
Location: New York City
|
| Posted: Fri May 20, 2005 7:40 am Post subject: |
|
|
Just saw this:
| jazblanc77 wrote: |
Try cutting and pasting this script into the head of your html coding (mine is right below my css. This will correct resizing issues with netscape and opera browsers.
| Quote: |
<script language="JavaScript">
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function P7_OpResizeFix(a) { //v1.1 by Project VII
if(!window.opera){return;}if(!document.p7oprX){
document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
document.onmousemove=P7_OpResizeFix;
}else{if(document.p7oprX){
var k=document.p7oprX-window.innerHeight;
var j=document.p7oprY - window.innerWidth;
if(k>1 || j>1 || k<-1 || j<-1){
document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
location.reload();}}}
}
P7_OpResizeFix();
//-->
</script>
</script> |
This looks really messy because it isn't paginated but it may work wonders for correcting your layering. |
No reason to use this in 2005. |
|
| Back to top |
|
|
SuperHero
Joined: 10 Dec 2003
Location: Superhero Hideout
|
| Posted: Fri May 20, 2005 12:49 pm Post subject: |
|
|
| The King of Kwangju wrote: |
Just saw this:
| jazblanc77 wrote: |
| Try cutting and pasting this script into the head of your html coding (mine is right below my css. |
|
Why would anyone put CSS into their html document? You should have a seperate stylesheet and link to it or import it in the head section. |
|
| Back to top |
|
|
pollyplummer
Joined: 07 Mar 2005
Location: McMinnvillve, Oregon
|
| Posted: Fri May 20, 2005 3:46 pm Post subject: |
|
|
 Yikes, really ??! I put it in my HTML document.  Because I forget what it says and I want to see it and sometimes I change it while working on the rest of it. Oh my... I am a big poser indeed. For a moment I felt a little bit pabo... but ah, well, it passed.  Hey, I'll post a link to my page in this thread when it's finished (maybe monday) and if you're bored, you guys can go look at it and then pick it to pieces, tell me everything that's wrong with it. Only if you're bored. I'm not overly sensitive. |
|
| Back to top |
|
|
SuperHero
Joined: 10 Dec 2003
Location: Superhero Hideout
|
| Posted: Fri May 20, 2005 5:27 pm Post subject: |
|
|
| pollyplummer wrote: |
| Yikes, really ??! |
The advantage to have a seperate CSS stylesheet is that you can change the layout of your entire site by editing one file. Instead of having to go into every single html file and changing the same setting repeatedly, you change it once.
If you put the CSS at the top of the html file that is fine, but very cumbersome to alter your page look if you have 10, 20 or even hundreds of pages on your site. |
|
| Back to top |
|
|
pollyplummer
Joined: 07 Mar 2005
Location: McMinnvillve, Oregon
|
| Posted: Fri May 20, 2005 5:43 pm Post subject: |
|
|
| But I dont like them all to have the same style. I like the control properties of CSS but I have a different style for almost every one of my pages... but I only have about 10 or 12? so it seems okay to me, I guess. |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
