Browser Issues When Replacing an Image With a CSS Box |
Browser Issues When Replacing an Image With a CSS Box |
chome4 |
Jul 16 2016, 09:51 AM
Post
#1
|
Newbie Group: Members Posts: 19 Joined: 6-April 16 Member No.: 24,129 |
This partial page shows an image slider with a jpeg happily next to it. I have a low-resolution monitor with Chrome as the main browser and a second monitor which is higher resolution and has Firefox running. On both monitors box elements have matching heights.
CODE <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <meta charset="utf-8"> <style> #wrapper{width:80%; margin:auto;} .slider{ overflow: hidden; height: 100%; width:70%; border:solid gray 3px; border-radius:3px;} .slider figure div{width: 20%;float: left;} .slider figure img{width: 100%;float: left;} .slider figure{ position: relative; width: 500%; margin: 0; left: 0; animation: 33s slidy infinite;} #text_panel{width: 21.9%;float:right;border:solid black 2px;height:500px;} </style> </head> <body> <div id="wrapper"> <aside id="text_panel"> </aside> <div class="slider"> <figure> <div class="slide"> <img src="http://i68.tinypic.com/9jenuo.jpg"> </div> </figure> </div> </div><!--wrapper--> </body> </html> However, when I replace the image with a box and give it a temporary height (the box contents won't extend to the full height of the box), it has different lengths on both monitors. CODE <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <meta charset="utf-8"> <style> #wrapper{width:80%; margin:auto;} .slider{ overflow: hidden; height: 100%; width:70%; border:solid gray 3px; border-radius:3px;} .slider figure div{width: 20%;float: left;} .slider figure img{width: 100%;float: left;} .slider figure{ position: relative; width: 500%; margin: 0; left: 0; animation: 33s slidy infinite;} #text_panel{width: 21.9%;float:right;border:solid black 2px;height:500px;} </style> </head> <body> <div id="wrapper"> <aside id="text_panel"> </aside> <div class="slider"> <figure> <div class="slide"> <img src="http://i68.tinypic.com/9jenuo.jpg"> </div> </figure> </div> </div><!--wrapper--> </body> </html> The lower resolution monitor didn't seem to mind the jpeg sitting next to the other element. It's only when I decided to replace the image with a text box, basically. How can I amend the CSS to get a box to have the same height as an element it sits next to? I know assigning heights to elements is a no-no, but this is just during the design process. |
pandy |
Jul 16 2016, 10:28 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
The HTML looks the same in both examples.
The box isn't the same height as the image when I view that in a browser. |
chome4 |
Jul 16 2016, 12:07 PM
Post
#3
|
Newbie Group: Members Posts: 19 Joined: 6-April 16 Member No.: 24,129 |
In the second html I removed the image and amended the #text_panel to have a border with a height.
|
pandy |
Jul 17 2016, 06:14 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
No, the image is there in both examples and so it the #text_panel rule. If I don't miss anything you've pasted the same example once. You also say the first example "shows an image slider with a jpeg happily next to it". I see a normal JPG but no slider images.
|
Lo-Fi Version | Time is now: 26th April 2024 - 08:55 AM |