CSS 3 Rounded Corner Pushing

[Kage Kazumi]

I am having two issues:

1) After adding my rounded corners CSS elements it for some reason is pushing the HTML elements down. How can I fix this?

NOTE: layout.css is for HTML positioning & size. | style.css is for color, images, and design.

2) My CSS tag .table-footer will not do anything when I add a color or image to it. It just shows blank.

See issues here: http://zanime.net/list/

Layout CSS: http://zanime.net/list/css/layout.css
Style CSS: http://zanime.net/list/css/style.css

Thanks in advanced.

~Kage

[bernie1227]

In what way are the elements being pushed down, which elements specifically are being moved, and how is it meant to look? The css rounded corners property should not effect the position of the divs within the table, as it only changes the appearance of the corners. I notice one problem is the alignment which is covered in this (http://www.dynamicdrive.com/forums/showthread.php?71664-Elements-Not-Aligning) thread, is this to do with your question about pushing elements down?

[Kage Kazumi]

In what way are the elements being pushed down, which elements specifically are being moved, and how is it meant to look? The css rounded corners property should not effect the position of the divs within the table, as it only changes the appearance of the corners. I notice one problem is the alignment which is covered in this (http://www.dynamicdrive.com/forums/showthread.php?71664-Elements-Not-Aligning) thread, is this to do with your question about pushing elements down?

1) No the Aligning Elements was solved and then I started to do more stuff to it.

2) You can clearly see what elements are being moved as you should not see the dark green. The text "Software Name" & "Operating System + Icons" should be higher and the dark green should not be seen.

3) Well it did when I added it to the CSS. However, I do not know why.

HTML (SEE above for CSS)



<div id="table">
<div class="table-title">
<p class="title-wrapper">
<span class="title-text">Software Name</span>
<span class="os-icons">
<strong>Operating System</strong>:
<img class="windows" src="images/windows-logo-icon.png" />
<img class="mac" src="images/mac-logo-icon.png" />
<img class="linux" src="images/linux-logo-icon.png" />
</span>
</p>
</div>
<div class="table-description">
<p class="description-thumb">
<img src="images/sample-image.jpg" />
</p>
<p class="table-text-description">
The graphical scripter within 001 Game Creator is a simple, yet powerful method of creating events for your game without the difficulty of learning to write code. It uses the simplicity of pointing and clicking to allow the user to easily implement events in the form of a flowchart.
</p>
</div>
<div class="table-footer">
<span class="table-type">2D | 3D</span>
<span class="table-price">Free/Commercial</span>
</div>
</div>

[bernie1227]

First thing, try commenting the border-radius properties from the css and see if that resolves the problem, and we will see whether it is the fault of border radius or not. Before you do that however, try commenting out the line:


background-color: #360;

Just in case.

[Kage Kazumi]

First thing, try commenting the border-radius properties from the css and see if that resolves the problem, and we will see whether it is the fault of border radius or not. Before you do that however, try commenting out the line:


background-color: #360;

Just in case.

The large green area goes away when I comment out:



border-style: solid;


However, then it losses it's corner look to it.

I commented out each part of the radius 1 by 1 and it went away when the above was commented out.

SEE: http://zanime.net/list/

[bernie1227]

Hang on, what happened to the part at the top? Do you want that part? What happens when you comment out my suggestions?

[Kage Kazumi]

Hang on, what happened to the part at the top? Do you want that part? What happens when you comment out my suggestions?

I wanted it to be rounded corners and you can click the link to see what happens when I comment out all radius stuff.

[bernie1227]

So what happens if you just comment out the background-color part?

[Kage Kazumi]

So what happens if you just comment out the background-color part?

Nothing. However, I think I solved my issue. I had a lot of DIVs going on so I switched it to:



<table id="tb-wrapper">
<tr id="tb-header">
<td>
<span class="tb-header-title"><strong>Software Title</strong></span>
<span class="tb-header-os-icons">
<strong>Operating System</strong>:
<img src="images/windows-logo-icon.png" alt="Windows" />
<img src="images/mac-logo-icon.png" alt="Mac" />
<img src="images/linux-logo-icon.png" alt="Linux" />
</span>
</td>
</tr>
<tr id="tb-body">
<td>
<span class="tb-body-image"><img src="images/sample-image.jpg" /></span>
<span class="tb-body-description"><strong>The graphical scripter within 001 Game Creator is a simple, yet powerful method of creating events for your game without the difficulty of learning to write code. It uses the simplicity of pointing and clicking to allow the user to easily implement events in the form of a flowchart.</strong>
</span>
</td>
</tr>
<tr id="tb-footer">
<td>
<span class="tb-footer-
</td>
</tr>
</table>


and it seems to have fixed all the pushing and un-aligning stuff.

Thanks for your help and replies though.

[bernie1227]

alright, glad you've solved the issue. So it was the html rather than the css then?
anyway:
If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.