Member Avatar for Racoon200

First of all, i would like you to take a look at my webpage:
www.etkclan.co.nr

Take a look at the part that says "Adress" then goes a text input, and a btn.

How can i make my text to go 5px lower? Its that i want it to be "printed" in the rock (of the background image), not over the mini-leave-layer.

Thanks. Awaiting response soon.

  • 3 Contributors
  • 3 Replies
  • 100 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A short, practical addendum to this thread: wanted the "Adress" label nudged about 5px so it sits on the rock background instead of over the small leaf graphic. 's padding change is a simple fix and is correct that browsers can render small vertical differences inconsistently. Below are a couple of reliable alternatives plus quick troubleshooting steps that work across modern browsers.

Use relative positioning or a vertical transform so the label can be nudged without restructuring the layout. Example (relative positioning):

.label {
  position: relative;
  top: 5px;
}

Example (transform, applied to an inline-block):

.label {
  display: inline-block;
  transform: translateY(5px);
}

Transforms are well supported and often smoother; see CSS transform on MDN.

Troubleshooting checklist: inspect the computed styles in browser dev tools to find inherited padding, margin, or line-height; set explicit font-size and line-height so baselines are predictable; wrap the label and control in a fixed-height container and use vertical-align or flexbox for consistent alignment; and use a CSS reset/normalize to reduce default differences between browsers. These steps make small pixel nudges far more reliable than relying on default spacing alone.

Recommended Answers

All 3 Replies

Member Avatar for ses5909

Your padding is currently 6px. try making it:

padding: 11px 6px 6px 6px;

Member Avatar for Racoon200

thanks man, very useful. :mrgreen:

Member Avatar for MidiMagic

Be aware that different browsers will treat the exact location of the text on an image differently.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.