MozillaZine

Firefox messing up my divs.. HELP

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
amarie802
 
Posts: 1
Joined: May 21st, 2018, 9:28 am

Post Posted May 21st, 2018, 9:31 am

So this is my code. Is anyone here able to see whats wrong with it that is causing my divs to mess up? Every other browser is fine.

<!DOCTYPE html>
<html>
<head>
<title>Snakesnitch43</title>
<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Alegreya+SC');
@import url('https://fonts.googleapis.com/css?family=Bubbler+One');
}

body {
text-align: center;
}

html {
background-color:black;
background-image:url('');
background-repeat: no-repeat;
background-position:right bottom;

}

*, *:before, *:after {
box-sizing: border-box;
}

.containInfo {

padding:5px;
margin:5px;
height:400px;
width:550px;
margin-left: 100px;
margin-right: auto;
margin-top: 0px;
text-align: justify;
font-family: 'Bubbler One', sans-serif;
font-size: 16px;
color:#c3d0e5;
letter-spacing: 1px;
position:relative;
z-index: 12;
overflow:hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
opacity: 0.7;
filter: alpha(opacity=70);

}

.containInfo:hover, .containInfo:focus, .containInfo:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
transition: all 0.5s ease-in-out;
color: white;opacity: 1;
filter: alpha(opacity=100);

}

.Info {
padding:10px;
height:400px;
width:550px;
overflow: auto;
text-align:justify;
}


img {
border-radius: 20px;
}


td {
text-align: center;
background-color: #b1d260;
letter-spacing: 1px;
padding-left: 10px;
padding-right: 10px;
padding: 5px;
color: #ffffff;
}

td:hover {
background-color:#d0da36;
transition: all 1s ease-in-out;

}

a.nav:link, a.nav:active {
font-size: 20px;
font-style: none;
text-align:left;
text-transform: none;
text-decoration: none;
letter-spacing:1px;
color: #4286f4;
font-family: 'Alegreya SC', serif;
display:block;
background-color: transparent;
margin-right:10px;
padding-top:5px;
z-index:10;
transition: 1s ease-in;



}
a.nav:visited {
font-size: 11px;
font-style: none;
text-transform: none;
text-decoration: none;
color: #4286f4;
font-family: 'Alegreya SC', serif;


}
a.nav:hover {
color:white;
font-family: 'Alegreya SC', serif;
display:block;
background-color: transparent;
transition: 1s ease-out;
letter-spacing: 2px;

}

a:link , a:visited , a:active {
font-size: 20px;
font-weight: normal;
font-style: none;
text-transform: none;
text-decoration: none;
color: #4286f4;
font-family: 'Alegreya SC', serif;

}

h1 {
padding-bottom:0px;
text-align:center;
font-size:28px;
color: #c3d0e5;
letter-spacing: 1px;
font-family: 'Alegreya SC', serif;
}

p {
text-indent: 5%;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}

li {
display:inline-block;
float: left;
}


#floatpg1{ float: right; padding-top: 2px; padding-left: 4px; padding-bottom: 4px; padding-right: 3px; width: 252px; height: 181px;}
#floatpg3{ float: right; padding-top: 2px; padding-left: 4px; padding-bottom: 4px; padding-right: 3px; width: 252px; height: 184px;}
#floatpg4LEFT{ float: left; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 3px; width: 100px; height: 100px;}
#floatpg4RIGHT{ float: right; padding-top: 0px; padding-left: 3px; padding-bottom: 0px; padding-right: 0px; width: 100px; height: 100px;}
#floatpg5{ float: right; padding-top: 2px; padding-left: 4px; padding-bottom: 4px; padding-right: 3px; width: 235px; height: 146px;}
#floatpg6{ float: right; padding-top: 2px; padding-left: 4px; padding-bottom: 4px; padding-right: 3px; width: 150px; height: 184px;}
#floatpg8{ float: right; padding-top: 2px; padding-left: 4px; padding-bottom: 4px; padding-right: 3px; width: 235px; height: 184px;}
#floatpg9{ float: right; padding-top: 2px; padding-left: 4px; padding-bottom: 4px; padding-right: 3px; width: 265px; height: 184px;}


</style>
</head>
<body>

<div style="position: relative; width: 650px; height: 220px;margin-left:80px; z-index: 2">
<img src="https://imgur.com/XioKwbs.png">
</div>

<div class="containInfo">
<a name="1"></a>
<div class="Info">
<h1>About Me</h1>
<div id="floatpg1">
<img src="https://imgur.com/ZdesWo8.png" width="95%" height="95%">
</div>
<p>Hi all. If you are here that means you stumbled upon my Profile. How many random clicks did it take for you to arrive here? Anyway if you are still here I am guessing that you are a bit curious about me so I guess I should indulge your curiosity. </p><p>
My name is Erin, though I also go by snake, snakie, snitchie, snakie snitchie… I will basically answer to whatever you call me so long as I know you are talking to me. I have been here on HEX since December 21, 2015 and was sorted into Slytherin (as normal. Like no joke I have even taken “What dual house are you” quizzes and have gotten answers like ‘Nope, too Slytherin’… though I wonder if there is such a thing.) And ever since I got on here I haven’t been able to get off.</p><p>
In my real life, I graduated in 2015 with a Bachelor’s and Master’s in Criminal Justice, though I am currently unemployed because of health issues. While I was technically an only child growing up, I have my father, who tends to act like a child and normally gets into trouble with me. I also had two younger “siblings” later on: Beagles named Millie and Billy. You can probably see where my obsession with Beagles comes from now, though I am pretty convinced that I have some Beagle blood in me too.

</div>

<a name="2"></a>
<div class="Info">
<h1>Hex Positions</h1>
<center>
<strong>Noble House of Slytherin Apprentice/Founder:</strong> XXX 1234 – XXX 1234 <br>
<strong>SOUP Writer:</strong> XXX 1234 – present <br>
<strong>SCA:</strong> XXX 1234 – present <br>
<strong>Publications Mod:</strong> XXX 1234 – present <br>
<strong>HEX Mentor:</strong> XXX 1234 – present <br>
<strong>Teacher’s Assistant:</strong> Sep 2017 – Feb 2018 <br>
<strong>The Quibbler Writer:</strong> XXX 1234 – present <br>
<h1>Awards:</h1>
<strong>Eighth Services to the Welcome Center Award:</strong><br>
Dec 2016<br>
<img src="http://img.hexrpg.com/TemperanceR/Newbies58.DecAward.png" height="70%" width="70%"><br>
<strong>SOUP Article of the Month with Morgana Malipiero</strong>
<h1>Other Awards:</h1>
<strong>Book of Records winner:</strong> March 2017 <br>
<strong>Everlasting Ink winner:</strong> RPC June 2017<br>
<strong>Top Student</strong> 2016-2017<br>
<h1>Contests placed in:</h1>
<strong>In Memoriam: Severus Snape</strong> <br>
3rd Place Prize Winner Feb. 2016<br>
<i> Contest Prize : Lily’s Letter </i><br>
<strong>Luck o' the Irish</strong><br>
2nd Place Prize Winner March 2017<br>
<i>Contest Prize : Decoy Detonator </i><br>
<strong>A Past Rewritten</strong><br>
1st Place Prize Winner March 2017 <br>
<i>Contest Prize : Death Eater Mask Collection </i><br>
<strong>Summer 2017 Seen and Unforeseen <br>
<i>"Something Worth Fighting For" </i>Role Play</strong><br>
Third Place winner with Nicole 2013
</center>
</div>

<a name="3"></a>
<div class="Info">
<h1>My Friends</h1>
<div id="floatpg3">
<img src="https://imgur.com/P7XCMwr.png" width="95%" height="95%">
</div>

<p>I have to admit I stole this idea from another friend… well she gave me the idea so does that really count as stealing? Anyway I thought about listing out all you amazing people but then decided to do something a bit different because knowing me I would end up inadvertently forgetting someone and then I would feel guilty. So instead this is a page to feature you if you would like to be. Feel free to say anything you would like (you can talk about how horrible I am as a person *wink*) and be featured here!</p>

<i>User paragraph or sentence</i> - <strong>username</strong>
<br><br><br>
</div>

<a name="4"></a>
<div class="Info">

<h1>Quidditch</h1>

<div id="floatpg4LEFT">
<img src="https://i.imgur.com/DHLcWin.png" width="95%" height="95%">
</div>
<div id="floatpg4RIGHT">
<img src="https://imgur.com/hywXfeZ.png" width="95%" height="95%">
</div>
<center>
<strong>Character name:</strong> Ada Tosto <br>
<strong>Nickname:</strong> none <br>
<strong>Gender:</strong> Female <br>
<strong>Age:</strong> 13, Year 3 <i>(Birthday, April 3)</i><br>
<strong>Height:</strong> 5 foot even <br>
<strong>Wand: </strong>Pine, Rougarou hair, 9 and 3/4 inches <br></center>
<p><strong>Physical Characteristics:</strong> easily overlooked for being so short and thin, Ada dyes her hair in vibrant colors, though she still isn’t a fan of too much attention. She may or may not have been grounded this past summer for getting a tattoo without permission. She absolutely hates pictures being done of herself so good luck trying to capture one of her entire face.<br></p>
<p><strong>Family/History:</strong>
Ada was born to two Muggle parents and grew up in the United States. She was always a lonely child growing up. Her parents were never around much and she would get farmed off on tutor after tutor. She was convinced half of them never bothered to learn her name. She didn’t even have siblings to keep her company. Her best and only friend growing up was her Beagle who she had for her entire life.</p>
<p>Everything changed for her when she did her first piece of accidental magic in front of her parents at the age of six. Her parents attempted to “cure” her of her possession and that is when they discovered the magical world through an old woman who her parent’s brought her to for curing. Ok so maybe her life didn’t change that much: her parent’s still didn’t spend any extra time with her, she was still farmed off on tutor after tutor, the only difference being they were now for magical subjects and she had a wand because her parent’s didn’t care about the rules, and her best and only friend was still her Beagle. In her time off from studying, her and her Beagle loved to sit in front of the TV and binge watch Star Wars or their favorite anime shows.</p>
<p>When she was 10 their life was uprooted when her parent’s learned about Hogwarts. They only ever wanted the best for her education so they farmed her off on some distant relative who they filled in about magic and sent her to live with them.While normally a quiet child she threw a fit when told her dog wouldn’t be able to come with her. She won that battle.</p>
<p>In that year she learned that dogs weren’t allowed at Hogwarts and she would need to leave him to attend Hogwarts. She was all ready to throw a fit to get him to Hogwarts with her, but sadly he got sick just before her 11th birthday and passed away on her birthday. She hates her birthday now. </p>
<p>With nothing holding her back anymore, she went to Hogwarts that September with a Snowy Owl for company. She threw herself into her studies, unable or unwilling to make friends… even she wasn’t sure where that actually fell. Though she did talk to a few of her housemates, and guessed maybe they could be considered friends. <p>
<p>Between her second and third years she found a tattoo parlor and managed to change her looks enough to look older and trick them into thinking she was legal for a tattoo. She got a memorial for her best friend. She spent the rest of the summer grounded but felt it was so worth it. </p>

<p><strong>Personality:</strong> As mentioned, she has always been fairly quiet. She is also very much a bookworm. She was surprised actually to not be placed in Ravenclaw when she read the descriptions of the houses. Her stubbornness is her second to last major feature. She hates change and clings to what she knows. Her final major feature is her competitiveness. She hates not being the best in whatever she is trying to do.
Reason for joining the Slytherin Quidditch Team: Blackmail. Her dorm mates hid her textbooks because they thought that she might make a good seeker given her short size and told her that she would get them back if she tried out. Her competitiveness reigned supreme and she found herself obtaining a slot on the team and enjoying herself. </p>


</div>


<a name="5"></a>
<div class="Info">
<h1>My Collections</h1>
<div id="floatpg5">
<img src="https://imgur.com/kP0AWE5.png" width="95%" height="95%">
</div>

There are many things that I collect here on HEX.
For my trophy case I collect: items from my favorite characters: Remus Lupin, Luna Lovegood, Fred and George Weasley, Dobby, Hedwig, the Niffler, Newt… and if any are ever created Jacob
Anything related to dogs
I also collect plushies, Slytherin items, anything for which I love the movement in the image, green and silver things, and anything else that catches my eye.
Of the collections I collect all 4: Wizard Cards, Animal Models, Beans, and Charms
For junk items I collect anything chocolate and Huggy Bears.

</div>


<a name="6"></a>
<div class="Info">
<h1>My Favorites</h1>
<div id="floatpg6">
<img src="https://imgur.com/oZFTSJ7.png" width="95%" height="95%">
</div>
<div style="text-align:left;">
<center>

<p>These are some of my favorite shows/movies/animals etc. They are in no particular order though I did try to keep them grouped together by category</p></center>
<br><strong>Movies: </strong>Harry Potter (of course), Space Jam Taken 1, Taken 2, Taken 3, National Treasure, National Treasure 2, Star Wars… I don’t watch too many movies apparently. <br><br>
<strong>Crime Dramas: </strong>Person of Interest, Criminal Minds, Criminal Minds: Suspect Behavior, Criminal Minds: Beyond Boarders, Bones (through season 5), Taken, Timeless… will likely add more as I finish them, but I love Crime Dramas so if you have a recommendation feel free to tell me, though it may already be on my list.
Cartoons: Tom and Jerry, Looney Tunes, Scooby-Doo <br><br>
<strong>Anime: </strong>Full Metal Alchemist, Full Metal Alchemist: Brotherhood, Yu Yu Hakusho, Yu-Gi-Oh, Rave Master, Pokemon, IGPX, Prince of Tennis, MAR, Naruto <br><br><strong>Animals: </strong>BEAGLES!, Huskies, Beagle/Husky mixes, chocolate labs, goofy puppies, white tigers, wolves, African wild dogs, snowy owls, dolphins, puffins, polar bear, panda bear, St Bernard (especially as puppies), Bunnies, Fox, Panther
<br><br><strong>Mythical creatures: </strong>Dragon, Griffin, Phoenix, Cerberus, Crocotta, Hellhound, Hippogriff
<br><br><strong>Random Characters that don’t fit into the other categories:</strong> Snoopy, Woodstock, catdog, dino the dinosaur, bam bam, pluto (baby version too), mickey, Minnie, tigger, Eeyore, Piglet, gumby, pokey, odie, Garfield, goofy (baby version too), dumbo, pongo, lady and tramp, chip and dale, penguins of Madagascar, hamtaro, donkey, puss in boots, Momo, Appa, Sokka, curious George, spirit (stallion), Mr Potato Head (if possible with body parts falling off), dopey, grumpy, balto, the Genie, Abu, Iago, slinky dog, Rex, Hamm, Buddy (air bud), stitch, Captain Jack Sparrow, Jack-Jack, Herbie, Shoeshine/underdog
<br><br><strong>Books:</strong> Harry Potter (obviously), will need to find my nook…
<br><br><strong>Musicals: </strong>Les Miserables, Wicked

</div>
</div>

<a name="7"></a>
<div class="Info">
<h1>My Pictures</h1>

<center>
<img src="https://imgur.com/LvWlJxq.png" width="255" height="255"><img src="https://imgur.com/JrDTb7H.png" width="255" height="255"><img src="https://imgur.com/qm8TtlZ.png" width="255" height="255"><img src="https://imgur.com/LtKdeL4.png" width="255" height="255">
</center>

</div>


<a name="8"></a>
<div class="Info">
<h1>Blank 1</h1>
<div id="floatpg8">
<img src="https://imgur.com/rgMlNOX.png" width="95%" height="95%">
</div>

<p>Blank 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis accumsan turpis. Fusce hendrerit arcu mauris, a consequat nisi blandit at. Integer dignissim mauris mollis elit pulvinar, convallis lobortis urna ornare. Proin euismod mollis dictum. Mauris ullamcorper ipsum diam, cursus condimentum tellus sodales in. Ut dictum semper nisl, nec dictum lorem finibus sit amet. Proin aliquam nunc eget leo bibendum fermentum. In eget ultrices ipsum. Sed consequat porta eleifend. Vivamus rhoncus eros eget tortor imperdiet pellentesque. Vivamus convallis mauris magna, et vehicula quam maximus eu.</p><p>
Etiam ultrices pellentesque sem eget ullamcorper. Duis ultricies mi sit amet turpis imperdiet, vel tempor ante ornare. Mauris nisl quam, lobortis quis elit et, semper sodales dui. Praesent ultricies sodales aliquet. Aliquam sit amet lorem nec lacus porta placerat quis eget dui. Aenean posuere faucibus risus vitae molestie. Suspendisse sit amet leo laoreet, accumsan ex ut, egestas sem. Suspendisse feugiat, est nec aliquet mollis, ante neque facilisis felis, ac viverra dolor neque iaculis neque. Morbi rhoncus sit amet enim blandit aliquam.</p>

</div>

<a name="9"></a>
<div class="Info">
<h1>Blank 2</h1>
<div id="floatpg9">
<img src="https://imgur.com/FtgLyQk.png" width="95%" height="95%">
</div>

<p>Blank 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis accumsan turpis. Fusce hendrerit arcu mauris, a consequat nisi blandit at. Integer dignissim mauris mollis elit pulvinar, convallis lobortis urna ornare. Proin euismod mollis dictum. Mauris ullamcorper ipsum diam, cursus condimentum tellus sodales in. Ut dictum semper nisl, nec dictum lorem finibus sit amet. Proin aliquam nunc eget leo bibendum fermentum. In eget ultrices ipsum. Sed consequat porta eleifend. Vivamus rhoncus eros eget tortor imperdiet pellentesque. Vivamus convallis mauris magna, et vehicula quam maximus eu.</p><p>
Etiam ultrices pellentesque sem eget ullamcorper. Duis ultricies mi sit amet turpis imperdiet, vel tempor ante ornare. Mauris nisl quam, lobortis quis elit et, semper sodales dui. Praesent ultricies sodales aliquet. Aliquam sit amet lorem nec lacus porta placerat quis eget dui. Aenean posuere faucibus risus vitae molestie. Suspendisse sit amet leo laoreet, accumsan ex ut, egestas sem. Suspendisse feugiat, est nec aliquet mollis, ante neque facilisis felis, ac viverra dolor neque iaculis neque. Morbi rhoncus sit amet enim blandit aliquam.</p>

</div>

</div>


<div style="position: relative; width: 200px; height: 300px;margin-left:680px; margin-top:-345px; padding-top:8px; z-index: 3;" class="nav">

<a href="#1" class="nav">ABOUT</a>
<a href="#2" class="nav">ACCOMPLISHMENTS</a>
<a href="#3" class="nav">FRIENDS</a>
<a href="#4" class="nav">QUIDDITCH</a>
<a href="#5" class="nav">COLLECTIONS</a>
<a href="#6" class="nav">FAVORITES</a>
<a href="#7" class="nav">PICTURES</a>
<a href="#8" class="nav">BLANK</a>
<a href="#9" class="nav">BLANK</a>

</div>


<div style="position: absolute; width: 550px; height: 50px; margin-left:100px; z-index: 5; display: flex;
justify-content: space-around;margin-top: 60px; transform: uppercase;">

<ul>
<li><a href="https://www.hexrpg.com/owl/snakesnitch43" class="nav">OWL ME</a></li>
<li><a href="https://www.hexrpg.com/trophy/index.php?user=snakesnitch43" class="nav">TROPHY CASE</a></li>
<li><a href="https://www.hexrpg.com/wishlist/index.php?view=snakesnitch43" class="nav">WISH LIST</a></li>
</ul>
</div>

<div style="position: absolute; width: 350px; height: 417px; margin-left:780px; margin-top:-240px; z-index: -200">
<img src="https://imgur.com/vDGVTTL.png">
</div>



</body>
</html>

Frenzie

User avatar
 
Posts: 2134
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted May 21st, 2018, 10:51 am

You can type [code] tags around your HTML, or just select it and click "Code" in the full editor (through preview).

What do you mean by mess up precisely?
Intelligent alien life does exist, otherwise they would have contacted us.

DanRaisch
Moderator

User avatar
 
Posts: 120285
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted May 21st, 2018, 3:00 pm

You could try running your code through the W3C HTML validator -- https://validator.w3.org/unicorn/

Lnwdz
 
Posts: 165
Joined: June 12th, 2012, 7:59 am

Post Posted May 28th, 2018, 1:13 am

Probably the OP has found this by now: The font "Bubbler One" has a bug that causes characters to be cut off on some systems. I see the bug with both Firefox 52 and Chrome on WinXP.

Bug - https://github.com/vladpopa33/googlefon ... issues/250
Font page - https://fonts.google.com/specimen/Bubbler+One

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 0 guests