MichaelF

It has been several days since I posted this topic. Does anyone have any advice as to why the transform: rotate property seems to add so much space after the photos on the web page I referenced?

I have a conundrum in this web page: https://allenstown-alt.org/news-analysis/20200812-early-fall-concert.htm I created some CSS styles to overlap and rotate some photos but they result in a big empty space below the photos. I have to use <p style="margin-top: -350px"> to force the following paragraph upward. The top two photos are animated horizontally. The styles for the photos are of the form: .photo1 { position: relative; top: 10px; left: 0px; z-index: 1; transform: rotate(-10deg); } The photos are grouped in a DIV block and each photo references one of the three defined styles (photo1, photo2, photo3). The two animated photos are in separate DIV blocks because they reference the animation code in the HEAD section. Can anyone offer advise as to why the transform: rotate property seems to add so much space after the photos?

Dear dsonesuk, I tried inserting the left: calc(50vh + 425px); into my <a href> tag as part of the style parameter, but whatever changes I tried for the two values, the Top button would not line up at the right edge of the content table in the 850px width and the max width. I checked the W3schools CSS site for more details about calc and found an example that used percentage instead of whatever vh stands for. After some experimenting, I found that left: calc(50% + 370px); positioned the Top button at the same relative position in the 850px width and the maximized width. That method seemed to use 50% of the browser width + 370px as the distance from the left edge of the window. Thanks for your help. It finally led me to the solution I had hoped for. Michael F

I have a CSS style that creates a TOP button fixed to the bottom right of a web page so, as you scroll, it stays put. How can I detect when the browser window is maximized so as to keep the Top button on the lower right edge of the content? My page design uses an 850px wide whole page table for content so the page width is fixed whether the browser window is at 850px or maximized. This is how a Word or PDF document behaves. The Top button appears at the lower right of the window at 850px but at the center of the page when the browser is maximized. The basic properties position the Top button to the left and slightly above the bottom of the window. position: fixed; bottom: 85px; left: 800px; with other properties specifying font properties and border effects. Yours, Michael F

I just did an experiment. I saw somewhere on one of the W3.CSS pages that you could download the css file and run it locally. I examined the file and saw at the top two statements with html definitions. The first one included box-sizing:border-box. When I looked up the box-sizing property, the default was content-box, as you stated. I commented out the two html statements and then added a link to that local file before the link to my css file. Amazingly my left, center, and right div blocks displayed as expected again. I did have to add "line-height: normal" to my p, th, td, and a few other styles to eliminate the unwanted extra line height that was coming from the W3.css file. With those problems fixed, I was able to re-implement the w3-tooltip element and create popup panels whose size and position could be individually controlled within a <span style=" "> tag block. It is counterproductive for W3schools to offer a css framework that requires the user to waste so much time figuring out workarounds for unwanted behaviors. it spoils one's enthusiasm for the whole thing.

I did move the link to my css file below the link to W3.css and the problem persisted. I don't understand the difference between a border-box and a content-box but I agree with your sentiment. There are so many useful and interesting W3.css classes but I can't use them if they distort basic element behaviors n unexpected ways. Has anyone else noticed this problem?

I was looking for a more flexible way of creating popup tooltips when I came upon the W3.CSS framework. It Unfortunately, it seems to mess with my own css styles. For example, as soon as I added this link tag to the file head section, <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> all the paragraph elements increased in line height. Also, I use div blocks for left, center, and right columns. W3.CSS narrowed the div blocks by about 10-20 pixels, pushing the whole page to the left. My div blocks use float: left and different width values to build the columns. Can someone tells me why W3.CSS is overriding my css settings?