I designed a contentbox for a website and on the desktop it looked good. But now I want to put it on the mobile.
You can see a example with only relevant html+css here http://pastehtml.com/view/bze2phhwn.html
On my smartphone, ive seen that the border-radius breaks(it displays the background color instead of the border color) in the rounded corners for 1-3px and you can see this effect also on the browser if you zoom in a little bit. Its weird, because if you zoom a little bit out and in, you`ll see that this effect isnt always there. So I tought that it isnt my bad html+css.
What might be the problem?
This seems to be a bug. Submitted to Mozilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=758958
Also: https://stackoverflow.com/questions/10774506/border-radius-causes-white-lines-when-applied-to-individual-corners/10774635#10774635
I think this is a bug as well, but I found a fix... err maybe it would be considered a hack. Here is an image of my issue:
http://i909.photobucket.com/albums/ac298/roboyak/missingBorder_zpsbhftdfmd.png
So my story is that I was getting a reset.css style sheet imposed on me from the parent web page. The td element was getting the following style from that css sheet:
table tbody tr td {
border-bottom: 1px solid #ccc;
}
Long ago when I started the project I overrode this style by stating the following rule in my sheet:
table tbody tr td {
border-bottom: none;
}
In trying to solve my problem I noticed that the border-bottom rule was showing up as "medium none" instead of none. I added the following code, and the border was no longer broken.
table tbody tr td {
border-bottom: none none;
}
Essentially this breaks the rule so the border comes back again on all td's which is not what I want, but I think that this may give some insight into what is happening.
Related
I'm working on page in Word press. The theme buttons aren't what i was looking for so i decided to make a custom ones. I thought it would be simple:
<button type="button" class="btn menu-button">BUY</button>
and css:
.btn{
font-size: large;
background: transparent;
border: solid;
}
So here is where my problem occur.
Some of the css code is working just fine (font-size for example) but the borders won't show up no matter what. I thought that the problem lies in the button tag itself but after futher investigations i noticed that it happens for every html element on my page, no matter div, p, H - the border stylization is not working neither color choice nor size, style etc.
So please help me, how can i make not only some but every css line work.
Im using WP 5.5.3 with customify theme. I've put The css from above into the custom css tab.
Borders usually require the border-style in order to have any of the other border styling properties to work. Try replacing with:
border-style:solid;
Alternatively, you can add them all to one line allowing you to omit the border-style by adding something along the lines of:
border: 1px solid black;
I am working in a summer note editor in which i had to add 2 lines with bottom border so user can type in the 2 lines.
I have added a div with the below css
.line {
line-height:10px;
height: 10px;
border-botom: 1px solid #007272;
}
In IE alone I am getting an grey outline around the div
I would like to remove the outline when user focus to type something.kindly provide some inputs.
When you say "focus", I think you mean "hover". If not, please correct me.
To remove the border on hover, just add another rule using the :hover pseudo class:
.line:hover {
border: none;
}
You may also want to make sure that all of your HTML/CSS/JS files are IE-compatible.
Hopefully this solved your problem. If not, please me.
I have fixed the issue by removing the height and line-height and adjusting with the padding on top and bottom.
The issue was when setting the height to any element inside summer note editor that outline is coming up in IE, so removed it and adjusted with padding.
This issue is little bit strange. I was unable to fix it in the local environment initially with the above-said code and fixed it while debugging in the high environment.
I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason in IE8, whenever I click inside any of the fields or their labels, that field or a surrounding one vertically moves up or down. The position then returns to normal once I click away from the box, though then another nearby box might move. Also, not all of the textbox fields have this issue, and clicking the same textbox doesn't always cause this issue. Any ideas?
I had the exact same problem, and to fix it, I set
display:block
On the element that was jumping around and that fixed it. Hope that helps.
Problem is when you focus an input text element, your browser puts 2px border around it for focus which is shifting its position if it is contained in a tight container...
I think it is more related to having 2px border all the times. Use the same color border and your text field to have transparent borders...
Your problem is addressed on this question
StackOverflow Question when focusing an input field border 8270380
This is speculation, but since focusing in an element seems to trigger the shifting, you may have different styles applied to those focused elements. Increased margins or borders could be responsible.
Not a big deal just put:-
outline: none;
in input tags
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
display: block;
border-radius: 5px;
outline: none;
}
if you want to have a border of your own then put
input:focus {
border: 2px solid salmon;
color: #333;
}
I think your structure conflicting with your parent structure CSS (there may possible is you using third party plugin something like jQuery UI or else) do one thing just for confirmation cut or copy your conflicting code and paste out side of you parent structure or beginning of your body tag. you find the difference.
For proper help I want to review you code.
Thnx
I have several web pages containing tables, for which I'd like to have line-borders around the tables and the cells. In fact, some of these pages existed for several years already, and rendered acceptably in IE6, IE7.
We switched about 6 months ago to a completely different set of style sheets to change our site look and feel. We also switched to "modern" browsers such as IE8 (and because I couldn't stop Vista) to IE9.
Now the borders don't render at all.
I spent a day fighting with this about a month ago, and failed to fix it. It seemed that I could reduce the page down to just the barest table and IE8 would still not render the border. I think I decided IE8 was just buggy, but I'm not an HTML expert so it is more likely that I'm buggy.
(I'm just getting back to this; I'll go see if I can find that reduced page).
Here is one such page:
http://www.semdesigns.com/products/DMS/DMSComparison.html
The tables should be obvious; you can tell them by their absence of lines :-{
The URI validates using the W3C service as HTML 4.01 Transitional.
Any suggestions?
EDIT: Posters all pointed out that the new style sheets set the default borders to 0. Oops!
From what I can see you have border:0; in the styling of the tables.
This will hide the borders on tables.
Your new stylesheets appear to use reset values, i.e. it sets lots of different elements to border:0 (including the table). You'll need to specifically set the border on the table and cells.
To set the border around just the table simply use table.box {border:1px solid #000}. If however you set the border on all sides of the table and cells you will have a border twice as thick as you need.
I therefore use the following trick to set the top and right border of the outside table, and the bottom and left of the table cells. This gives the appearence of an even border across the whole content of the table.
table.box {
border-top: 1px solid #000;
border-right: 1px solid #000;
}
table.box td {
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
I've noticed however you have some empty cells in your box table, so you'll need to remove these to prevent the double borders.
I see no borders in Firefox either.
SDstyle.css, line 16. You do CSS reset which sets border: 0; for a big list of tags, including table, td, tr, th ...
You declare your table like <table class="box">, but at the same time you have no such style defined in your CSS files.
The table renders differently in Firefox from IE8/Chrome.
The website is here: http://nordschleife.metaforix.net/118/118/index.php/panasonic.html?id=5&___store=uk&___from_store=default
I'd prefer the looks & feel of the table under IE8/Chrome, as the lines are light gray instead of completely black.
Is there anything I can do to fix this?
you need to give the TD element the light gray border color in the CSS information.
For example
table tr td {border:1px solid #DDD; }