cousineaug Posted February 20, 2011 Share Posted February 20, 2011 My website has a liquid main body. There is a menu bar at the top of the main body in which I have used roudned corners. So far it works in latest browsers except Firefox...I can live with that.My problem is that in Safari and Chrome, the right side of an element becomes flat when its neighbour wraps to the next line.Here are the 2 elements that make up forgeround and background of the menu p.bg { background: #662; margin-left: -10px; /*needed to touch the left side of the container*/ }.bg a { font-family: 'segoe print', 'bernhardmod bt bold', papyrus, cursive; color: #030; font-size: 14px; background: #d8d8af; text-decoration: none; line-height: 27px; border-top-left-radius: 20px 12px; border-bottom-left-radius: 20px 12px; border-top-right-radius: 20px 12px; border-bottom-right-radius: 20px 12px; } have a look at the siteresize Chrome or Safari until the HOME button wraps to the next line. Then see that the right side of the BLOG button has gone flat.Other than just quirky border radius implementation, does anyone know why this is happening?...Guy Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.