I'm just starting out with HTML and CSS, and I was hoping to get some help with a problem I'm facing.
Let's get into the specifics.
I've been working with this code: .
Essentially, it's an HTML table styled using CSS. I've used the collapse feature to make the borders 1px thick.
However, when I view the final result in Firefox and Chrome, I encounter five strange issues:
I can't seem to make the table the size I intended. The overall dimensions should be 688x27px (including padding and borders), but in Firefox and Chrome, the size appears as 688x29px! It seems my code might be incorrect...
Oddly enough, I am unable to restrict the size of certain cells as desired. This specifically applies to three cells that only contain images (with classes .td-bluebg, .td-description, .td-collapse). The image sizes are 25x25, 26x25, and 25x25px, respectively. I want them to fit snugly within their respective cells, without any extra padding, and be enclosed by a 1px border. However, there is an additional 2px at the bottom for the .td-bluebg cell and the entire table (referring back to issue 1), which is noticeable in Chrome. I'm trying to figure out how to eliminate this extra space.
I managed to create a simple "image on mouse hover" effect on the "?" icon in the .td-bluebg cell. However, the hover image displays 2px away from the table border. Is there a way to position the hover image just 1px away from the table border? I attempted to achieve this, but unfortunately, I had no success. My attempts almost broke the styling entirely at one point, but I reverted to an older version of the CSS code for the hover effect and placed unnecessary CSS declarations within /* */ comment brackets randomly, which helped me rectify the mistake. How would you approach making the on-hover image display just 1px from the table border?
I am struggling to set the cell size of .td-collapse as intended; instead of maintaining its designated size at the end of the table, it stretches to fill the entire width. Any suggestions on how to fix this?
In my current code, I have declared:
table.gridtable1 td { border-color: #219DEC; /* AnimeRulezzz blue */ border-style: solid; border-width: 0px; }If I wish to revert to having individual cells with 1px borders, is there a way to hide either the left or right borders of specific cells if specified (e.g., setting table.gridtable1 td {border-width: 1px;})?
P.S. Please excuse the messy code — as mentioned, I'm still quite new to all of this. ^_^;